使用背景如下图
二级菜单为一级菜单的子路由,二级菜单加载M组件
业务逻辑:
一级菜单中有一个功能按钮,点击按钮可以改变状态state,组件M根据按钮状态state加载数据
实现思路,使用事件总线,发布/订阅者模式
1. 创建一个公共的Vue实例
新建一个bus.js,导出实例
import Vue from "vue";
export default new Vue();
导入到一级路由中
import Bus from 'js/Bus.js';
2. 点击按钮的时候发布一个事件 msg
HTML部分
<span id="btnBox"
@click="statechange(state)">
<img :src="state_url"
alt="">
<span id="state_font">{{value}}</span>
</span>
methods
// 改变状态
statechange (id) {
// 如果是处理中
if (id === 0) {
this.state = 1;
this.url = require("../assets/images/pause.png");
this.value = "暂停中";
Bus.$emit('msg', this.value);
}
// 如果是暂停中
if (id === 1) {
this.state = 0;
this.url = require("../assets/images/icon-ok-green.png");
this.value = "处理中";
Bus.$emit('msg', this.value);
}
},
3. M组件中订阅事件
导入 import Bus from '/js/Bus.js';
mounted () {
Bus.$on('msg', e => {
// 如果是处理中就调用
if (e === '处理中') {
this.getTaskList(1);
}
});
},
以上使用事件发布/订阅实现了,非组件通信问题