VUE兄弟组件传值_vue兄弟组件传承那-CSDN博客

本文介绍了一种Vue中兄弟组件间通信的方法，通过创建一个全局事件总线（Event Bus）实现跨组件的数据传递。具体步骤包括定义事件总线、在发送方组件触发事件并附带数据、在接收方组件监听该事件并接收数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue';
export default new Vue();

假如父组件如下：

<template>
<components-a></components-a>
<components-b></components-b>
</template>

子组件a如下：

<template>

<div class="components-a">

<button @click="abtn">A按钮</button>

</div>

</template>

<script>

import eventVue from '../../js/eventVue.js'

export default {

name: 'app',

data () {

return {

‘msg':"我是组件A"

}

},

methods:{

abtn:function(){

eventVue.$emit("myFun",this.msg) //$emit这个方法会触发一个事件

}

}

}

</script>

子组件b如下：

<template>

<div class="components-a">

<div>{{btext}}</div>

</div>

</template>

<script>

import eventVue from '../../js/event.js'

export default {

name: 'app',

data () {

return {

'btext':"我是B组件内容"

}

},

created:function(){

this.bbtn();

},

methods:{

bbtn:function(){

eventVue.$on("myFun",(message)=>{ //这里最好用箭头函数，不然this指向有问题

this.btext = message

})

}

}

}

</script>