VUE兄弟组件之间的通信——父组件转达和事件车的使用

上篇文章主要介绍了父子组件之间的通信，兄弟组件之间的通信在文末稍微提了一下。

什么是兄弟组件呢？

就是被同一个父组件调用的的子组件，就好比父母有几个孩子，这几个孩子就是兄弟姐妹关系一样，很好理解。

兄弟组件之间的通信，今天主要介绍两种方法。

通过父组件转达和事件车。

• 父组件转达

这种方法一般适用于逻辑比较简单的值传递。

比如，页面A调用了两个组件C1和C2。C1想给C2发送数据，我们可以先把数据发送给父组件，也就是A页面，A页面再把值发送给C2。

C1 → A → C2
C2 → A → C1

通过父组件转达这种方法就好比兄弟两个不说话，有事的时候，直接告诉父母，父母再去转达。写个例子。

C1组件：

mounted: function () {  
  this.$emit('getName',"刘小妞")
}

A页面(父组件)

//html
<C2 :topName="topName" />
<C1  v-on:getName="setTopName"/>

//js
<script>
import C1 from '~/components/C1.vue'
import C2 from '~/components/C2.vue'

export default {
    data() {
      return {
        topName:''
      };
    },
    components: {
      C1,
      C2
    },
    methods: {
      setTopName(data){
        this.topName = data
      }
    }
}
</script>

C2组件：

//html
<div>{{topName}}</div>

//js
<script>
  export default {
    props:{topName:String},
  }
</script>

• 事件车

事件车是不需要通过父组件的，两兄弟直接通信。只不过，两兄弟需要一个共同的JS，我们把这个共同的JS称为事件车。写个例子就明白了。

新建一个JS文件，取名eventBus.js。随便放一个地方就行，我放在了plugins目录下。内容如下：

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

然后，兄弟组件里都需要引用这个JS。

C1组件：

<script>
import eventBus from '~/plugins/eventBus'

mounted: function () {
  eventBus.$emit('getName',"刘小妞")
}
</script>

C2组件：

//html
<div>{{topName}}</div>

//js
<script>
  import eventBus from '~/plugins/eventBus'
  export default {
    data() {
      return {
        topName:''
      }
    },
    created() {
      eventBus.$on('getName',(message)=>{
        this.topName = message
      })
    },
  }
</script>

其他关于前端知识的文章，欢迎微信搜索公众号：“刘小牛的栖息地”或者微信识别下图的二维码查看，感谢大家的支持。