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

相关文章

来自专栏前端人人

React第三方组件2(状态管理之Refast的使用②异步修改state)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件2(状态管理之Refast的使用①...

2593
来自专栏做全栈攻城狮

Android Studio自带模拟器设置代理,实现Fiddler抓包流程

2833
来自专栏滕先生的博客

react-native 跨平台滤镜集成

3898
来自专栏林德熙的博客

win10 uwp 使用资源在后台创建控件

本文告诉大家如何使用资源在后台创建控件,本文使用按钮做例子,包括如何绑定资源,找到资源。

1214
来自专栏Python、Flask、Django

Mac下菜单管理工具 bartender

1061
来自专栏Golang语言社区

golang实现简单的udp协议服务端与客户端示例

其实udp没有什么服务端和客户端的概念了,只是一个发一个收而已,只是这样较方便能识别和理解. 服务端: package main import ( "...

3428
来自专栏跟着阿笨一起玩NET

Winfrom 使用TabControl控件模拟程序向导步骤

在给应用程序添加一个向导的做法有很多,但其中比较简便易行的是使用TabControl。如下图所示

1031
来自专栏程序小工

【VSCode插件】background添加编辑器背景

VScode 编辑器对中文支持很好,插件丰富,主题也好看,所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件b...

2073
来自专栏web开发

VUE路由去除#问题

最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看。为了解决此问题,大家一般都会想到:mode: 'history'。可是在开发...

2044
来自专栏余生开发

vue脚手架移动适配--rem(iPhone图纸750px)

移动端设计图稿一般按iphone6 的750px 设计,经过此适配之后,可直接写图纸测量的数据,包括文字大小

2384

扫码关注云+社区