通常父子之间传值比较方便 通过 props 和 $emit 实现
兄弟之间传值无法实现
对于一些没有用到 vuex 的项目就可以使用 Event Bus 来实现
Event Bus 简单使用
首先创建 一个 js 文件 作为一个载体引入 vue 新建 Event Bus 并导出通过 $emit 和 $on 实现页面之间的通信
上代码 ~~~~
1. 新建eventBus.js文件中 初始化
import Vue
from 'vue'
export const EventBus
= new Vue()
2. 组件中引入 Event Bus 文件 发送事件
<template>
<button @click="sendMsg()">-
</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '来自A页面的消息');
}
}
};
</script>
3. 组件中引入 Event Bus 文件 接收事件
<template>
<p>{{msg}}
</p>
</template>
<script>
import {
EventBus
} from "../event-bus.js";
export default {
data(){
return {
msg: ''
}
},
created() {
EventBus.$on("aMsg", (msg) => {
this.msg = msg;
});
}
};
</script>
ok 完成 A B 两个不相关的页面关联了起来
这只是简单的使用 大家多提建议
