vue 元件通訊

vue元件通訊方式

1、vuex 通過vuex內的state物件定義共享屬性，通過mutations/actions/getters物件內定義方法來修改state物件內的屬性，需要使用共享屬性的元件通過import 然後在頁面中使用/呼叫，看詳情

2、父子元件之間：

父元件 => 子元件：在父元件中import子元件，component物件中加入子元件名稱，在template中加上子元件標籤，在子元件標籤上繫結需要傳輸的屬性，在子元件中通過props，就可以使用了。父元件呼叫子元件方法

子元件 => 父元件：在子元件中通過this.$emit('parentobserve',params)廣播自定義事件parentobserve，父元件中在元件標籤上監聽該事件，進行事件處理。this.$parent.event/props 呼叫父元件方法或者屬性

3、兄弟元件：

a、新建乙個js檔案eventbus,js，事件車相當於乙個中介軟體引入vue，new vue（）並開放出來

import vue from 'vue'export 
default
new vue

b、在需要通訊的兄弟元件之間引入eventbus.js,

兄弟元件a.vue

import eventbus from '../eventbus.js'
export 
default
},created () ,
methods: 
}}

c、兄弟元件b：注意：當解除安裝元件前要通過beforedestroy將當前監聽的事件刪除掉，通過eventvue.$off(name）刪除，因為就算元件被解除安裝但是監聽事件不會被刪除，而再次進入頁面時又會新增新的事件監聽，導致有多個事件監聽，所以會多次觸發事件程式。

import eventbus from '../eventbus.js'export 
default
},created () )
},methods: 
}