Vue組件通訊方式

Vue組件通訊方式主要有props, eventbus, vuex, 自定義事件等等。。。

1. 事件總線eventbus-發佈訂閱模式

大體原理是定義一個全局的事件存放數組，當進行事件訂閱時，將事件存放到全局的數組裏；當發佈事件時，則執行全局事件數組裏存放的對應事件。這是比較經常使用的事件通訊模型。

發佈訂閱模式中，事件的發佈和訂閱是同一個對象。

2. 利用parent和root來通訊

兄弟組件之間的通訊：兄弟組件之間通訊可經過祖輩之間搭橋。下面例子中Child1和Child2就經過公共的parent父組件來進行通訊。

使用$parent/$root來進行事件通訊
// parent.vue
<Child1 />
<Child2 />
複製代碼

// child1.vue
click(){
    this.$parent.$emit('child1Click', 'child1 點擊，發送消息，觸發事件')
}
複製代碼

// child2.vue
mounted(){
   this.$parent.$on('child1Click', (msg) => {
       console.log(msg)
   })
}
複製代碼

3. 使用children來通訊

父子組件之間的通訊：在父組件裏經過this.$children來調用子組件裏的方法，進行父子組件間的通訊。調用子組件方法時不保證子元素順序。

// parent.vue
this.$children[0].getTitle();
this.$children[1].getTitle();
複製代碼

4. provide/inject

祖先/後代組件之間的屬性傳遞：實現祖先和後代之間傳值。祖先使用provide提供值，子組件使用inject注入值。若是子組件有重名屬性，可使用別名。

// parent.vue
export default {
    provide(){
        return {
            parentName: '我是父組件標題'
        }
    }
}
複製代碼

// child1.vue
export default {
    inject: ['parentName']
}
複製代碼

5. props

父子組件間的屬性傳遞：父組件經過props將屬性傳遞給子組件。這是經常使用的一種方式。

// parent.vue
<Child2 :msg="msg"/>
複製代碼

// child.vue
props: ['msg']
複製代碼