vue 2 使用 Bus.js 实现兄弟 (非父子) 组件通信简单案例

野性酷女 2022-04-02 08:52 101阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。  
首先需要在任意地方添加一个bus.js

![20181226091722730][]

在bus.js里面 写入下面信息

import Vue from 'vue'
     export default new Vue;

![20181226091722746][]

在需要通信的组件都引入Bus.js

如果你的bus.js是自定义一个bus的文件那from后面就改成你的所放的位置

import Bus from './bus.js'

![20181226091722764][]

接下来就是要组件通信了

添加一个 触发 \#emit的事件按钮

<template>
        <div id="emit">
            <button @click="bus">按钮</button>
        </div>
     </template> 
    
    import Bus from './bus.js' 
    export default { 
        data() {
            return {
                message: ''"
            }
         },
    　　methods: {
           bus () {
              Bus.$emit('msg', '我要传给兄弟组件们，你收到没有')
           }
        }
    }

打开要和$emit通信的另外一个组件  添加

![20181226091722778][]

在钩子函数中监听msg事件

<template>
        <div id="on">
                <p>{
       {message}}</p>
        </div>
    </template>
    
    import Bus from './bus.js'
    export default {
        data() {
          return {
            message:  ''
          }
        },
        mounted() {
    　　　　let self = this
           Bus.$on('msg', (e) => {
             self.message = e
    　　　　　console.log(`传来的数据是：${e}`)
           })
         }
       }

最后p会显示来自$emit传来的信息

转自：https://www.cnblogs.com/place-J-P/p/7586819.html

[Link 1]: https://www.captainai.net/jiangyu1013/
[20181226091722730]: /images/20220402/154a387591374c5a951a170144001b5c.png
[20181226091722746]: /images/20220402/02020a5c2c4d41258b69ae0e2000581d.png
[20181226091722764]: /images/20220402/f3a7df5bff2f44d3aa1d6f0a0431f8dc.png
[20181226091722778]: /images/20220402/0a8cef925c644e10a48184b7f7b0e3f0.png