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、Flask、Django

Mac下菜单管理工具 bartender

1191
来自专栏编程微刊

微信小程序从零开始开发步骤(五)轮播图

3863
来自专栏前端人人

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

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

2743
来自专栏做全栈攻城狮

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

6243
来自专栏林德熙的博客

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

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

1454
来自专栏Petrichor的专栏

系统快捷键

982
来自专栏Golang语言社区

golang zip 压缩,解压(含目录文件)

4222
来自专栏余生开发

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

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

3464
来自专栏阿凯的Excel

快心遂意-快捷键弱智版

今天和大家分享一些快捷键,为啥非要分享快捷键呢,因为想让大家有种 快捷键弱智版正式开始 Ctrl+Z 撤销 Ctrl+Y 撤销的撤销(我猜你不知道,你可以试一...

2773
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用⑤异步操作)

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

3064

扫码关注云+社区

领取腾讯云代金券