2017-08-29 132 views
1

當我鍵入這個(控制檯$vm0.$children.forEach(tab => console.log(tab.name));在瀏覽器控制檯各組件時,越來越不確定 IAM只是學習vuejs和創建組件越來越不確定。 我的html文件是在這裏獲得使用vuejs

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css"> 
    <style type="text/css">body {padding-top:40px; }</style> 
</head> 

<body> 
    <div id="root" class="container"> 
     <tabs> 
      <tab name="About Us" :selected="true"> 
       <h1>Here is the content for About us tab.</h1> 
      </tab> 
      <tab name="About Our Culture"> 
       <h1>Here is the content for cukture tab.</h1> 
      </tab> 
      <tab name="Contact tab"> 
       <h1>Here is the content for contact us tab</h1> 
      </tab> 
     </tabs> 
    </div> 
    <script src="js/11.js"></script> 
</body> 
</html> 

我的js代碼這裏

Vue.component('tabs', { 
template: ` 
     <div> 
      <div class="tabs"> 
       <ul> 
       <li class="is-active"><a>Pictures</a></li> 
       <li><a>Music</a></li> 
       <li><a>Videos</a></li> 
       <li><a>Documents</a></li> 
       </ul> 
      </div> 
      <div class="tabs-details"> 
       <slot></slot> 
      </div> 
     </div> 
`, 
mounted() { 
    console.log(this.$children); 
} 
}); 

Vue.component('tab',{ 
template: ` 
    <div><slot></slot></div> 
`, 
props: { 
    name: { required : true } 
} 
}) 

new Vue({ 

el: "#root" 

}) 
+0

如果你曾經定義'$ VM0 '? – thanksd

+0

你想做什麼? –

+0

@thanksd我在vue DevTools的標籤組件中定義了 –

回答

0

解決了這個錯誤

$vm0 is current element in Vue 

當我點擊Devtools一個元素,它被定義爲VM0 $像HTML devtools 你可以找到它的屬性和方法, 你可以改變性質鑑別儀表及其價值觀像

$vm0.message = "Hello World" 
+0

請在添加答案時多解釋一點。 –