iT邦幫忙

0

求教vue component的問題

  • 分享至 

  • xImage

最近開始學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..拜託大家幫我解惑了,先謝謝了!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Victor
iT邦新手 2 級 ‧ 2019-03-02 17:10:32

我也剛接觸的VUE 把我知道的給您參考不確定是否正確如有誤請其他大神指教一下

  1. this 指的是元件的實體,count:this.initCount 這個this是子元件的實體
  2. 父元件是下方宣告的 APP VUE實體
  3. 他應該是想表達 因為父元件傳送1這個值給子元件my-component後,可以用initCount讀取到1,元件裡面把 initCount 值寫到 count 所以才叫你去維護它就好,Vue也不建議子元件去修改父元件的值
14881411 iT邦新手 5 級 ‧ 2019-03-03 18:02:16 檢舉

嗯,謝謝

0
  1. count:this.initCount里的'this'指的是什么?是Vue的实体app吗?

this 是值组件实例,即 vue.component 创建的这个组件。

  1. 父元件透过props向子元件传递资料,父元件是谁?是template吗?子元件又是谁?

vue.component 创建了一个组件 my-component ,是使用了这个组件,谁就是父组件。问题中 app 使用可该组件,app 就是父组件。

  1. 以后只需维护 count,这个 count 指的是 data 里的 count ? 还是template里的count? 所以以后都不用管props的内容?

count:this.initCount 从 props 获取值然后赋值给 data 里的 count,此后我们无需关心 initCount,只要维护 count 就好了。vue 是不推荐在子组件中修改 props,因为这样会造成混乱。

<my-component:init-count="1"></my-component>

这是是父组件向 子组件传递值。

14881411 iT邦新手 5 級 ‧ 2019-03-12 21:16:23 檢舉

嗯,很謝謝你的回答!

0
mikey666
iT邦見習生 ‧ 2019-07-29 20:10:55

你已经是高手了

我要發表回答

立即登入回答