提出问题

点击一个子组件的 按钮，可以修改另一个子组件的数据，这2个是兄弟组件

如下图：

解决方法

兄弟组件传递数据，也是通过 事件 实现的，兄弟组件需要 全局事件总线（EventBus） 实现

全局事件总线（EventBus）：就是一个 vue 对象

组件A 向 组件B 传递数据 流程图

步骤

1. 创建 事件总线
2. 组件B 向事件中心 注册 监听事件
3. 组件A 向事件中心 触发 事件

相关 api

• vm.$on( event, callback ) ：注册监听事件，详见

• vm.$emit( eventName, […args] )：触发事件，详见

代码

创建事件总线

在 src 目录下创建 EventBus.js：

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

创建子组件 UserInfo6

在 components 目录下创建 UserInfo6.vue，内容如下：

<template>
    <div class="app">
        <div>{{msg}}</div>
        姓名：<input type="text" v-model="name">
        <input type='button' value='点击' @click='doChange'>
    </div>
</template>
<script>
import  EventBus from "../EventBus.js"

export default {
    data:function(){
        return {
            msg:'子组件：用户信息，向兄弟组件传递数据',
            name:'韩梅梅'
        }
    },
    methods:{
        doChange:function(){
            //向事件总线发送 changeAuthor 事件和数据
            EventBus.$emit("changeAuthor", this.name)
        }
    }
}
</script>
<style scoped>
.app{
    border: red 1px solid;
}
</style>

创建子组件 BookInfo

在 components 目录下创建 BookInfo.vue 文件，内容如下：

<template>
    <div class="app">
        {{msg}}
        <div>名称：{{title}}</div>
        <div>作者：{{author}}</div>
    </div>
</template>
<script>
import  EventBus from "../EventBus.js"

export default {
    data:function(){
        return {
            msg:'子组件：书的信息',
            title:'vue从入门到放弃',
            author:'lucy'
        }
    },
    created:function(){
        //向事件总线注册监听 changeAuthor事件，当接收到该事件后，会执行箭头函数
        EventBus.$on('changeAuthor', (author) => {
             this.author = author
         })
    },
    beforeDestroy:function(){//当组件销毁时，解除绑定，否则会一直占用
        //注意：必须传值，否则解除所有监听事件
        EventBus.$off('changeAuthor')
    }
}
</script>
<style scoped>
.app{
    border: green 1px solid;
}
</style>

修改 App.vue

内容如下：

<template>
<!-- 模板 -->
  <div id="app">
    <user-info  />
    <book-info />
  </div>
</template>

<script>
import UserInfo from './components/UserInfo6' 
import BookInfo from './components/BookInfo' 

export default {
  name: 'App',
  components: {
    'user-info':UserInfo, //注册局部组件
    'book-info':BookInfo
  }
}
</script>

原文出处：/show_1IX2jeujusKb.html