一、初始化
首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种,新创建一个 .js 文件,比如 event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
现在我们已经创建了 EventBus ,接下来你需要做到的就是在你的组件中加载它,并且调用同一个方法,就如你在父子组件中互相传递消息一样。
(两个组件都要引用(兄组件、弟组件))
import { EventBus } from "../../event-bus.js";
兄组件
在按钮上面绑定了点击事件,发送一则消息
<template>
<view>
<button @click="tosonSmall">tosonSmall</button>
</view>
</template>
<script>
//引用
import { EventBus } from "../../event-bus.js";
export default {
name:"sonBig",
data() {
return {
};
},
methods:{
tosonSmall(){
EventBus.$emit("one",'我是tosonSmall')
}
}
}
</script>
<style lang="less">
</style>
弟组件
接收这则消息。
<template>
<view>
{{msg}}
</view>
</template>
<script>
//引用
import { EventBus } from "../../event-bus.js";
export default {
name:"sonSmall",
data() {
return {
msg:'',
};
},
mounted() {
EventBus.$on("one",(data)=>{
this.msg=data
})
}
}
</script>
<style lang="less">
</style>