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

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

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

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

 import Vue from 'vue'export default new Vue;

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

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

import Bus from './bus.js'

接下来就是要组件通信了

 添加一个 触发 #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通信的另外一个组件  添加

 

 在钩子函数中监听msg事件

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jenkins自动化部署

jenkins自动化部署 github地址 首先设置源码地址&#xff0c;jenkins会从仓库中拉取最新代码 拉取代码后运行shell脚本自动进行编译 cd mediaService cmake -S . -B cmake-build-release-hisi3531 -DCMAKE_C_COMPILER/opt/hisi-linux/x86-arm/arm-hisiv500-linux/target/bin…

学开车不能急于求成,心急上路

我发现很多人开始学开车以后就急着要上路&#xff0c;觉得开车是很简单的事情&#xff0c;个人觉得开车虽然不难&#xff08;相对于会开车的人来说&#xff09;&#xff0c;但是&#xff0c;虽然不是很难&#xff0c;也不是一学会开车起步就能上路去潇洒的。急于求成的人很容易…

valgrind检测libevent内存泄露

valgrind检测libevent内存泄露 github地址 在使用封装好的http库时&#xff0c;遇到了如下的内存泄露&#xff0c;一开始在definitely处还存在泄露&#xff0c;这里就不贴图了&#xff0c;已经被淹没了。 根据提示定位出错代码位置&#xff0c;如下图&#xff1a; 这里提示ev…

大佬(概率期望DP)

首先根据数据范围&#xff0c;可以判断基本上是n^2的复杂度 通过分析我们发现每一次都可以从m个数中任意选&#xff0c;既然任意选&#xff0c;那么此时的概率的分母就是不变的&#xff0c;然而题中涉及的是某一段的最大值&#xff0c;所以我们按套路假设 f[i][j]表示第i天&…

高效的数据压缩编码方式 Protobuf

高效的数据压缩编码方式 Protobuf github地址 目录 ProtocolBuffers 是什么为什么要发明 ProtocolBuffersproto3 定义 Message 分配字段编号保留字段默认字段规则各个语言标量类型对应关系枚举枚举中的保留值允许嵌套枚举不兼容性更新 Message未知字段Map 类型JsonMapping p…

解决 VUE前端项目报错:RangeError: Maximum call stack size exceeded

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 我点击菜单按钮报错&#xff1a; RangeError: Maximum call stack size exceeded 2. 原因&#xff1a;参数传递有问题或者方法调用有…

新手必须掌握的学车技巧-上坡起步

我们知道&#xff0c;做什么事情都是万事开头难&#xff0c;新手们在学车方面更能体会到这一点&#xff0c;正确掌握学车技巧对于新手来说是非常重要的事情&#xff0c;今天&#xff0c;平安学车网&#xff08;www.paxcw.com&#xff09;就会大家探讨一下我们学车时必须掌握的是…

高效的序列化/反序列化数据方式 Protobuf

高效的序列化/反序列化数据方式 Protobuf github地址 目录 protocolBuffers 序列化 Int32StringMapslice序列化小结 protocolBuffers 反序列化 Int32StringMapslice序列化小结 序列化/反序列化性能最后 protocolBuffers序列化 上篇文章中其实已经讲过了 encode 的过程&…

解决 VUE前端项目报错: Uncaught ReferenceError : initPage is not defined (initPage 方法是有的,依旧报错找不到)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 明明代码中定义了 initPage 这个方法&#xff0c;&#xff0c;却一直报找不到这个方法&#xff1a; Uncaught ReferenceError: init…

掌握新手学车技巧对于新手来说是非常重要的

刚开始学车的时候对于新手来说很多操作不知道从哪里下手&#xff0c;这个时候&#xff0c;如果按照相关的学车技巧来学习的话&#xff0c;对于新手来说是非常有好处的。下面我们就来学习一下让新手们可以快速进入开车状态的学车技巧吧&#xff01;基本上驾校的教练都会教学员把…

iView学习笔记(三):表格搜索,过滤及隐藏列操作

iView学习笔记(三)&#xff1a;表格搜索&#xff0c;过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本&#xff1a;3.6.6 Django版本&#xff1a;1.11.8 数据库&#xff1a;MariaDB 5.5.60 新建Django项目&#xff0c;在项目中新建app&#xff0c;配置好数据库 api_test…

Jenkins自动编译库并上传服务器

Jenkins自动编译库并上传服务器 github地址 首先添加 git 地址&#xff1a; 再添加定时构建&#xff0c;每天夜里构建一次&#xff1a; 执行 shell 脚本进行构建 cd networklayerecho "build json x86" cmake -S . -B cmake-build-release -DCMAKE_BUILD_TYPERele…

解决:The “data“ option should be a function that returns a per-instance value in component definitions

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 只是想定义一个变量&#xff0c;方便页面上调用 。 报错&#xff1a; The "data" option should be a function that re…

gdb 调试 TuMediaService

gdb 调试 TuMediaService github地址 起因 首先需要有 armgdb 环境运行 ./armgdb ./TuMediaService 进入 gdb 模式b hi3531_trcod_interface.cc:98 打断点r 运行程序print this->vdec_config_path_ 打印关键值 在这里我们关注的值已经被修改&#xff0c;由于程序中没有刻…

PyQt安装和环境配置

PyQt安装和环境配置 github地址 首先安装Pycharm 新建一个空的 python 工程&#xff0c;找到 setting 安装第三方模块 PyQT5 , 点加号&#xff0c;先安 PyQT5 , 再安装 pyqt5-tools &#xff0c;后面包含 qtdesinger 以上模块都安完&#xff0c;设置扩展工具的参数找到 sett…

HZOJ 大佬(kat)

及其水水水的假期望&#xff08;然而我已经被期望吓怕了……&#xff09;。 数据范围及其沙雕导致丢掉5分…… 因为其实每天的期望是一样的&#xff0c;考虑分开。 f[i][j]表示做k道题&#xff0c;难度最大为j的概率。 则f[i][j](f[i-1][j])*(j-1)*temq[j]*tem;q为前缀和&#…

F12 界面:请求响应内容 Preview 和 Response 不一致、接口返回数据和 jsp 解析到的内容不一致

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 情况描述&#xff1a; 我有一个接口只是简单的查询列表数据并返回给前端作一个表格展示。 接口返回的 userId 数据为&#xff1a;…

为什么新手开车起步总是熄火

最近&#xff0c;深圳市民陈小姐年前考完驾照就买了一辆新车&#xff0c;在过完年后上班的第一天&#xff0c;几乎每次等红绿灯的路口起步时汽车都会熄火&#xff0c;导致身后的司机非常不满狂按车喇叭催她“别挡路”&#xff0c;陈小姐自己也急得冒汗。就像陈小姐这样的新手很…

MSCRM日志配置

之前有很多人问我在MSCRM上日志怎么做&#xff0c;具体的如&#xff08;登录日志&#xff0c;操作日志&#xff09;。个人认为操作日志确实比较难做&#xff08;不过我可以给一个思路可以用触发器或者plugin来实现&#xff0c;不过比较麻烦&#xff0c;对系统压力也比较大&…

数据结构——数组

数组 github地址 数组基础 数组最大的有点&#xff1a;快速查询。索引快数组最好应用于 “索引有语义” 的情况但并非所有有语义的索引都适用于数组&#xff08;身份证号&#xff09;数组也可以处理 ”索引没有语义“ 的情况 封装数组类 数组类该具备的功能&#xff1a;增…