vue2.0中的组件通信3——兄弟组件之间通信

刺骨的言语ヽ痛彻心扉 2022-05-29 08:12 190阅读 0赞

[上一篇][Link 1]我写了子组件通过事件向父组件发送数据，在这里我们就来聊聊同级组件之间数据通信的问题。同级组件之间的通信需要依赖一个vue实例作为中介者，（类似邮差）起到传递信息的作用。  
我的代码依然沿用上面两篇的目录结构：  
新建一个event.js文件，在里面新建一个vue实例，这个实例就承担起了组件之间通信的桥梁了，也就是中央事件总线。  
![这里写图片描述][Image 1]

加入代码 event.js：

import Vue from 'Vue'
    const vm=new Vue()
    export default vm;

然后新建两个同级组件zujian1.vue,zujian2.vue，引入event.js  
在每个组件中定义好数据：  
zujian1.vue:

<template>
      <div class="zujian1">
        <h2>同级组件1</h2>
      </div>
    </template>
    <script> import vm from "@/event.js"; export default { name: "zujian1", data() { return { data1: "组件一的数据" }; } }; </script>
    <style> .zujian1 { color: blueviolet; font-size: 30px; border: 1px solid #bbb; margin-bottom: 10px; } </style>

zujian2.vue:

<template>
      <div class="zujian2">
        <h2>同级组件2</h2>
      </div>
    </template>
    <script> import vm from "@/event.js"; export default { name:"zujian2", data() { return { data2: "组件二的数据" }; } }; </script>
    <style> .zujian2 { color: yellowgreen; font-size: 30px; border: 1px solid #bbb; } </style>

app.vue:

<template>
      <div id="app">
        <zujian1></zujian1> 
        <zujian2></zujian2> 
      </div>
    </template>
    
    <script> import childOne from "@/components/childOne"; import childTwo from "@/components/childTwo"; import zujian1 from "@/components/zujian1"; import zujian2 from "@/components/zujian2"; export default { name: "App", data() { return { }; }, components: { childOne, childTwo,zujian1,zujian2 } }; </script>
    
    <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

炫酷的效果：  
![这里写图片描述][Image 1]  
然后在组件中写通信的方法：  
知识点：  
1. 使用vm.$emit(‘事件名称’，’传入参数’)，作为发送消息的那一方；

1.  使用vm.$on(‘事件名称’，’回调函数’)，作为接收消息的那一方。

最终的zujian1.vue:

<template> <div class="zujian1"> <h2>同级组件1</h2> <p>{ { data1}}</p> </div> </template> <script> import vm from "@/event.js"; export default { name: "zujian1", data() { return { data1: "组件一的数据" } }, methods:{ //接收数据的方法 receive:function(){ vm.$on('two-to-one',(data)=>{ console.log(data); this.data1=data; }) } }, mounted:function(){ // 执行该方法 this.receive(); } }; </script> <style> .zujian1 { color: blueviolet; font-size: 30px; border: 1px solid #bbb; margin-bottom: 10px; } </style>

zujian2.vue:

<template>
      <div class="zujian2">
        <h2>同级组件2</h2>
        <button @click="sendData">发送数据</button>
      </div>
    </template>
    <script> import vm from "@/event.js"; export default { name: "zujian2", data() { return { data2: "组件二的数据" }; }, methods: { //发送数据的方法 sendData: function() { vm.$emit("two-to-one", this.data2); } } }; </script>
    <style> .zujian2 { color: yellowgreen; font-size: 30px; border: 1px solid #ccc; } </style>

结果：点击组件2 的发送按钮，组件2的数据就可以发送到组件1里了：  
![这里写图片描述][Image 1]

自此，关于vue.js的三种组件通信方式全部介绍完毕。这也是我在学习vue过程的笔记。文章写的不好的地方请大家多见谅，有什么疑问、错误欢迎大家指出，我们一起学习交流。

[Link 1]: http://blog.csdn.net/github_37772805/article/details/79623782
[Image 1]: