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

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

首先需要在任意地方添加一个bus.js

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

1 import Vue from 'vue'
2 export default new Vue;

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

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

1 import Bus from './bus.js'

 接下来就是要组件通信了

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

<template>
    <div id="emit">

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

 在钩子函数中监听msg事件

<template>
    <div id="on">
            <p>{{message}}</p>
    </div>
</template>

import Bus from './bus.js'
export default {
    data() {
      return {
        message:  ''"
      }
    },
    mounted() {
       Bus.$on('msg', (e) => {
         this.message = msg
       })
     }
   }

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python

Linux权限详解 命令之 chmod:修改权限

在这种使用方式中,首先我们需要了解数字如何表示权限。 首先,我们规定 数字 4 、2 和 1表示读、写、执行权限(具体原因可见下节权限详解内容),即 r=4,w...

472
来自专栏技术博文

PHP中getenv()函数

在PHP中getenv(参数)函数是一个用于获取环境变量的函数,根据提供不同的参数可以获取不同的环境变量,具体如下: “PHP_SELF” 当前正在执行脚本的文...

3348
来自专栏北京马哥教育

精通Linux常用的100+命令大全万字详解长文(珍藏版)

运维行业正在变革?推荐阅读:30万年薪Linux运维工程师成长魔法 Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作、文件存取、目录操作、...

27010
来自专栏解Bug之路

从linux源码看socket的close

笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情。上篇博客讲了socket的阻塞和非阻塞,这篇就开始谈一谈socket的...

1427
来自专栏hbbliyong

SVN被锁定的几种解决方法

用SVN经常出现被锁定而无法提交的问题,选择解锁又提示没有文件被锁定,很是头疼。 这里整理了一下SVN被锁定的几种解决方法: 1.出现这个问题后使用“清理”即"...

31313

如何使用Midnight Commander,一个可视文件管理器

对于初学者来说,使用命令行工具来管理Linux服务器上的文件的方式可能是令人生畏的,耗时的,有时甚至是会带来风险的。而资深使用者会希望切换到更合适的工具来处理不...

1095
来自专栏熊二哥

IntellijIDEA快速入门(Windows版)

跟随公司变更技术堆栈的步伐,开始学习相应工具IntelliJ的使用,之前一个大神同时也提到,最近该IDE的市场份额已然超越了免费的Eclipse,因此该工具已经...

1677
来自专栏好好学java的技术栈

java工程师必备linux常用命令,这篇文章就够了

bash 是一个为GNU计划编写的Unix shell。它的名字是一系列缩写:Bourne-Again SHell — 这是关于Bourne shell(sh)...

611
来自专栏SDNLAB

ONOS二次开发——Netconf命令下发

最近对onos进行了二次开发,主要实现了Juniper路由器的 driver开发。在Driver中利用NETCONF协议读取并修改路由器配置、生成NETCONF...

3255
来自专栏大内老A

[WCF权限控制]基于Windows用户组的授权方式[上篇]

Windows用户组安全主体权限模式,顾名思义,就是将利用Windows安全系统将对应的Windows帐号所在的用户组作为该用户权限集的授权方式。认证和授权密不...

1719

扫描关注云+社区