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 条评论
登录 后参与评论

相关文章

来自专栏程序猿DD

Spring Boot 与 OAuth2

原文:Spring Boot and OAuth2 译者:nycgym 原文:http://www.spring4all.com/article/827 ? 本...

1.2K12
来自专栏Java进阶架构师

透彻理解Spring事务设计思想之手写实现

事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败。事务具有4个特性:Atomicity(原子性),Consistency(一致性)...

802
来自专栏SpringBoot 核心技术

第四十二章: 基于SpringBoot & RabbitMQ完成DirectExchange分布式消息多消费者消费

26610
来自专栏程序猿DD

消费者驱动的微服务契约测试套件:Spring Cloud Contract

在微服务架构下,你的服务可能由不同的团队提供和维护,在这种情况下,接口的开发和维护可能会带来一些问题,比如服务端调整架构或接口调整而对消费者不透明,导致接口调用...

2807
来自专栏光变

Spring MVC配置响应静态文件请求

在web项目中,如果使用了页面,就会涉及到css/js等组件。下面讲解了如何在SpringMVC项目中,相应css、js、img文件,并启用浏览器缓存等机制。

803
来自专栏PHP技术

PHP判断远程图片或文件或url是否存在

//判断远程文件 function check_remote_file_exists($url) { $curl = curl_init($url); ...

3198
来自专栏Java Edge

Tomcat集群目录1. Tomcat集群能带来什么2. Tomcat集群实现原理3. 一,二期架构对比4 Tomcat单机部署多应用-CentOS6.8Nginx负载均衡配置,常用策略,场景及特点

2776
来自专栏Java技术栈

Junit5新功能一览

Java的JUnit测试框架已经来到了5这个版本,与以前的版本不同的是JUnit5具有来自多个子项目的模块,其中包括: 1、Platform,用于在JVM上启动...

3227
来自专栏Titan框架

在Jetty中使用websocket

在工作中,我们有时候需要使用能与前端实时通信传输以通信,这种技术就是由Socket实现的,而Socket又有短连接和长连接之分,长连接技术就是我们今天要介绍的w...

800
来自专栏ImportSource

消费者驱动的微服务契约测试套件Spring Cloud Contract

在微服务架构下,你的服务可能由不同的团队提供和维护,在这种情况下,接口的开发和维护可能会带来一些问题,比如服务端调整架构或接口调整而对消费者不透明,导致接口调用...

33012

扫码关注云+社区