1. 程式人生 > 其它 >vue 2 使用Bus.js進行兄弟(非父子)元件通訊 簡單案例

vue 2 使用Bus.js進行兄弟(非父子)元件通訊 簡單案例

 vue2中廢棄了$dispatch和$broadcast廣播和分發事件的方法。父子元件中可以用props和$emit()。如何實現非父子元件間的通訊,可以通過例項一個vue例項Bus作為媒介,要相互通訊的兄弟元件之中,都引入Bus,之後通過分別呼叫Bus事件觸發和監聽來實現元件之間的通訊和引數傳遞。

首先需要在任意地方新增一個bus.js

在bus.js裡面 寫入下面資訊

1 import Vue from 'vue'
2 export default new Vue;

 在需要通訊的元件都引入Bus.js    

如果你的bus.js是自定義一個bus的檔案那from後面就改成你的所放的位置

1 import Bus from './bus.js'

 接下來就是要元件通訊了

 新增一個 觸發 #emit的事件按鈕

<template>
    <div id="emit">

開啟要和$emit通訊的另外一個元件  新增

 在鉤子函式中監聽msg事件

<template>
    <div id="on">
            <p>{{message}}</p>
    </div>
</template>

import Bus from './bus.js'
export default {
    data() {
      return {
        message:  ''"
      }
    },
    mounted() {
       Bus.$on('msg', (e) => {
         this.message = msg
       })
     }
   }

最後p會顯示來自$emit傳來的資訊