1.创建一个文件创建一个独立的实例用来在兄弟共享数据 绑定到vue总线
import Vue from 'vue'
//定义一个bus总线,事件总线 ,。 在兄弟组件共享数据的时候用
var bus=new Vue()
//导出
export default bus;
2.创建兄弟组件 创建了com_1 和 com_2文件 要将其中的内容值相互传递
通过引入总线文件进行接收和传递值(自我赶脚 这个方法就像子传父的发射类似)
3.基本步骤
3.1.引入总线
import bus from "../modules/bus.js";
3.2发射
在文件中设置发送的@click事件
<button @click="sendToCom2">传值到com2</button>
通过组件的methods:事件方法处理click事件
methods:{
sendToCom2(){
bus.$emit('receivecom1',this.comData)
}
}
//'receivecom1'发射传数据的一个名称
//this.comData 传递的数据
发射之后 在bus实例中存储 存储名receivecom1 存储值是文件中发射数据的值
3.3接收
通过生命周期中的 credted(实例创建之后,html还没有渲染)
//在生命周期中使用
created() {
bus.$on("receivecom1", this.handler);
},
//receivecom1接受内容值得名称
//将接受的内容值放在一个函数方法中this.handler
//通过方法进行赋值操作 在methods中实现
handler2(d) {
this.receiveCom2Data = d;
},
//将获取的值通过方法赋值到组件的值内容中