简介: 兄弟组件,就是同级别的组件⭐
第一种: EventBus方法
首先在main.js文件中定义一个新的bus对象,然后挂载在原型链上,生成一个全新的Vue实例,通过bus.$emit('自定义的事件名',要传的值)传值,通过bus.$on来接收,具体步骤如下:
1、首先在main.js中生成一个全新的vue实例,如下:
//写在main.js中
Vue.prototype.$bus = new Vue()
2、在组件brother.vue 中,声明并监听事件 brotherEvent;
//brother.vue
//在同级别组件中声明监听事件
created(){
this.$bus.$on('brotherEvent', res=>{
console.log(res) // res就是sister.vue里choseEvent方法传递的值data
})
}
3、在组件 sister.vue(和brother.vue 同级)中,触发 brotherEvent事件;
//sister.vue
//在方法中调用事件
methods:{
choseEvent(){
this.$bus.$emit('brotherEvent',this.data)
}
}
通讯成功●'◡'●
第二种:中间件方法
原理就是通过父组件作为中间件来通讯,结合子传父,父再传子,实现同级别间的兄弟组件传值,具体步骤如下:
1、首先在父组件引入两个子组件,并且给子组件添加自定义方法,如下:
//father.vue
//组件引入
import brother from "./components/brother.vue";
import sister from "./components/sister.vue";
//组件注册
components: {
brother,
sister,
},
//组件使用
//在子组件上添加自定义方法 @defineBrother="choseBrother"
<brother @defineBrother="choseBrother" />
//在子组件上添加自定义方法 @defineSister="choseSister"
<sister @defineSister="choseSister" />
2、在子组件使用$emit调用子组件的自定义方法,并且传值;
brother.vue:
//brother.vue组件
<button @click="choseBrotherBtn">兄弟按钮</button>
data() {
return {
brotherMsg: [1, 2, 3, 4],
};
},
methods: {
choseBrotherBtn() {
this.$emit("defineBrother", this.brotherMsg);
},
},
sister.vue:
//sister.vue组件
<button @click="choseSisterBtn">姐妹按钮</button>
data() {
return {
sisterMsg: { name: "xxx" },
};
},
methods: {
choseSisterBtn() {
this.$emit("defineSister", this.sisterMsg);
},
},
3、父组件通过自定义方法,接收来自子组件传递的数据;
//father.vue接收数据
data() {
return {
data: "",
msg: "",
};
},
methods: {
choseBrother(value) {
console.log(value);//这里的value就是兄弟组件传过来的数组数据brotherMsg
this.data = value;//赋值给父级组件data
},
choseSister(value) {
console.log(value);//这里的value就是姐妹组件传过来的数据对象sisterMsg
this.msg = value;//赋值给父级组件msg
},
},
4、父组件接收到数据以后,再通过父传子,传递对应数据;
//father.vue
//父传子:sendFather="msg";
//把sister.vue中的数据sisterMsg 传给brother;
<brother :sendFather="msg" @defineBrother="choseBrother" />
//父传子 :sendSister="data";
//把brother.vue中的数据brotherMsg 传给sister;
<sister :sendSister="data" @defineSister="choseSister" />
5、最后使用props接收数据;
//兄弟组件 接收来自 姐妹组件 的 对象数据sisterMsg
props:["sendBrother"],
{{sendBrother}}
//姐妹组件 接收来自 兄弟组件 的 数组数据brotherMsg
props:["sendSister"],
{{sendSister}}
兄弟组件(同级组件)传值通讯成功(●'◡'●)