vue 2 使用Bus.js進行兄弟(非父子)元件通訊 簡單案例
阿新 • • 發佈:2022-05-03
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傳來的資訊