Vue 事件中央匯流排

方式1: 全域性事件匯流排

1.在main.js檔案中定義

new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App),
 beforeCreate(){
   Vue.prototype.$bus = this
 }
})

2.使用方法

// 傳值 (可以在你定義的方法中傳值)

this.$bus.$emit('定義名稱',值)

// 監聽資料 (在mounted監聽資料)

this.$bus.$on('定義名稱' val=>{})

// 銷燬(在beforeDestroy銷燬)

this.$bus.$off('定義名稱')

方式2:

1.在main.js的同級建一個bus.js

import Vue from "vue"
export default new Vue

2.在main.js引入

// 事件中央匯流排傳值

Vue.prototype.bus = new Vue();

3.使用方法

// 1.引入(傳值和監聽資料部分都需引入bus.js檔案)

import Bus from '@bus.js'

// 傳值(我是在beforeDestroy中傳值的)

Bus.$emit('定義名稱',值)

// 監聽資料 (我在beforeCreate 中監聽資料)

Bus.$on('定義名稱',val=>{})

//銷燬(在監聽資料頁面的 beforeDestroy 中銷燬)

Bus.$off('定義名稱')

擴充套件: 還可以使用訊息訂閱與釋出的方式 實現任意元件間的傳值

方法:

// 下載外掛 pubsub-js

npm i pubsub-js --save

// 在需要傳和監聽的頁面引入

import pubsub from 'pubsub-js'

// 釋出(傳值)

pubsub.publish('xxx',值)

// 訂閱(接收)

this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{

 // 注意 msgName的值為你定義的 xxx  data為你真正傳過來的 值

})

// 銷燬 (在beforeDestroy)

pubsub.unsubscribe(this.pubId)