一、初始化
首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。新创建一个 .js 文件,如 event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
二、发送事件
A页面在按钮上面绑定了点击事件,发送一则消息,想通知 B页面。
<!-- A.vue -->
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '来自A页面的消息');
}
}
};
</script>
三、接收事件
在 B页面 中接收这则消息。
<template>
<p>{{msg}}</p>
</template>
<script>
import {
EventBus
} from "../event-bus.js";
export default {
data(){
return {
msg: ''
}
},
mounted() {
EventBus.$on("aMsg", (msg) => {
// A发送来的消息
this.msg = msg;
});
}
};
</script>
// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))
四、移除事件监听者
EventBus.$off('aMsg')