vue組件間的七種交互

• 1.props和$emit
  • 父組件向子組件傳遞數據是通過prop傳遞的，子組件傳遞數據給父組件是通過$emit觸發事件來做到的。
• 2.特性綁定$attrs和$listeners
  • 如果父組件A下面有子組件B，組件B下面有組件C,這時如果組件A想傳遞數據給組件C怎麼辦呢？ 如果繼續用上面的方法，會變得非常複雜，不利於維護；Vue 2.4開始提供了$attrs和$listeners來解決這個問題，能夠讓組件A之間傳遞消息給組件C。
• 3.中央事件總線 Events Bus
  • 新建一個Vue事件bus對象，然後通過bus.$emit觸發事件，bus.$on監聽觸發的事件。
• 4.依賴注入：provide和inject
  • 父組件中通過provider來提供變量，然後在子組件中通過inject來注入變量。
  • 不論子組件有多深，只要調用了inject那麼就可以注入provider中的數據。而不是侷限於只能從當前父組件的prop屬性來獲取數據，只要在父組件的生命週期內，子組件都可以調用。

// 父組件
name: "Parent",
provide: {
for: "demo"
},
components:{
childOne
}
// 子組件
name: "childOne",
inject: ['for'],
data() {
return {
  demo: this.for
}
},
components: {
childtwo
}

 

• 5.v-model
  • 父組件通過v-model傳遞值給子組件時，會自動傳遞一個value的prop屬性，在子組件中通過this.$emit(‘input’,val)自動修改v-model綁定的值
• 子組件引用：ref和$refs
• 7.父鏈和子索引：$parent和$children
• 8.vue1中boradcast和dispatch
  • vue1.0中提供了這種方式，但vue2.0中沒有，但很多開源軟件都自己封裝了這種方式，比如min ui、element ui和iview等。
• 9.vuex