最近開始學vuejs,學到component時卡關了,很努力的google,但還是不懂,想請教各位高手幾個蠢問題
<div id="app">
<my-component:init-count="1"></my-component>
</div>
<script>
vue.component('my-component',{
props:['initCount'],
template:'<div>{{count}} </div>',
data:function(){
return{
count:this.initCount
}
}
});
var app = new Vue({
el:'#app',
})
</script>
以上是從書裡抄來的程式碼,書上寫著,元件中宣告了count,它在元件初始化時會取得父元件的initCount,之後就與之無關了,以後只需維護count,這樣可避免直接操作initCount。
我想問的是:
1.count:this.initCount裡的'this'指的是什麼?是Vue的實體app嗎?
2.書上一直強調父元件透過props向子元件傳遞資料,父元件是誰?是template嗎?子元件又是誰?
3.書裡寫以後只需維護count,這個count指的是data裡的count? 還是template裡的count? 所以以後都不用管props的內容?
這些問題或許在各位看來很蠢,但我真的搞不懂component,越google越亂...Orz..拜託大家幫我解惑了,先謝謝了!
我也剛接觸的VUE 把我知道的給您參考不確定是否正確如有誤請其他大神指教一下
this
是值组件实例,即 vue.component 创建的这个组件。
vue.component 创建了一个组件 my-component ,是使用了这个组件,谁就是父组件。问题中 app 使用可该组件,app 就是父组件。
count:this.initCount 从 props 获取值然后赋值给 data 里的 count,此后我们无需关心 initCount,只要维护 count 就好了。vue 是不推荐在子组件中修改 props,因为这样会造成混乱。
<my-component:init-count="1"></my-component>
这是是父组件向 子组件传递值。