兄弟组件传值

826 阅读1分钟

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;
},
//将获取的值通过方法赋值到组件的值内容中