Vue父子元件通訊實踐

元件（component）是vue.js的核心部分，元件的作用域是孤立的，所以不能在子元件模板內直接引用父元件的資料，但是元件之間的通訊是必不可少的。元件a在其模板中使用了元件b，a元件要向b元件傳遞資料，b元件要將其內部發生的事情告知a元件，那麼a b元件怎麼進行通訊呢？

vue.js父子元件的關係可以總結為props down, events up，父元件通過props向下傳遞資料給子元件，子元件通過events給父元件傳送訊息，它們的工作方式如下圖所示

父元件 -> 子元件：父元件傳值給子元件使用props屬性

子元件 -> 父元件：子元件傳值給父元件使用emit事件

1、父元件通知子元件

props是父元件用來向子元件傳遞資料的乙個自定義屬性，子元件需要顯示的用props屬性宣告要傳遞的引數

父元件向子元件index-header傳遞showdate引數

export default 
},components: 
}

子元件配置showdate引數

export default

props是單向繫結的，當父元件的showdate屬性變化時，會傳遞給子元件，但是不會反過來，防止子元件無意修改父元件的狀態。每次父元件更新時，子元件所有的props引數都會非同步更新為最新值。

由於子元件的props引數值是非同步更新的，所以在子元件methods裡使用props引數要注意引數值是否是最新值。最近開發遇到乙個問題，主元件傳值給子元件並呼叫子元件的方法，方法裡有用到props的引數值，每次呼叫方法裡的props引數值都是上一次的值，就是因為props非同步更新導致的，可以採用下面兩種方法解決

① 使用$nexttick，在資料變化之後等待 vue 完成更新 dom

父元件向子元件傳遞filterparam引數，並呼叫子元件的getdimdata()方法，引數如果是駝峰的形式，才傳參時需要改為『『-『』的方式

export default }},
components: ,
methods: );}}}

子元件配置filterparam引數，並在getdimdata()方法中使用

export default ;
console..log(param);}}

② 監聽引數變化

父元件向子元件傳遞filterparam引數，並呼叫子元件的getdimdata()方法

export default }},
components: ,
methods: 
}}

子元件監聽filterparam的變化

export default ;
console..log(param);}}

2、子元件通知父元件子元件通過$emit自定義事件通知父元件，父元件通過v-on來監聽子元件觸發的事件，**例項如下

父元件監聽子元件傳遞引數getfilterparam

export default ,
showdate: true,}},
components: ,
methods: );}}}

子元件向父元件傳遞引數filterparam

export default ,
methods: );
}

Vue父子元件通訊實踐

vue父子元件通訊實現過程

Vue父子元件通訊

vue父子元件通訊

Vue父子元件通訊實踐

vue父子元件通訊實現過程

Vue父子元件通訊

vue父子元件通訊

相關推薦