组件通信 eventtBus
平级组件的通信 一个全局发布订阅模式,它是挂载到全局的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>组件通信 &bus</title><script src="./node_modules/vue/dist/vue.js"></script> </head> <body><div id="app"><children1></children1><children2></children2></div> </body> <script>//发布订阅模式//适合简单的数据流Vue.prototype.$bus = new Vue();Vue.component('children1',{template:`<div><span>children1</span></div>`,mounted() {this.$bus.$on('吃',(food)=>{console.log(food)}) },})Vue.component('children2',{template:`<div><span>children2</span></div>`,mounted() {this.$bus.$emit('吃','月饼')},})let vm = new Vue({el:'#app',})//hello </script> </html>
转载于:https://www.cnblogs.com/guangzhou11/p/11540050.html
组件通信 eventtBus相关推荐
- Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
- React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信 直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...
- angularjs1访问子组件_vue 组件通信看这篇就够了(12种通信方式)
vue 组件间的通信是 vue 开发中很基础也十分重要的部分,作为使用 vue 的开发者每天都在使用.同时,vue 通信也是面试中非常高频的问题,有很多面试题,都是围绕通信展开. 本文会介绍常见的通信 ...
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- 子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- 组件通信 $ref
(1)放在dom上表示获取当前dom元素, (2)放到组件上表示获取当前组件实例 (3)在v-for中获取的是集合 <!DOCTYPE html> <html lang=" ...
- 关于vue2.0组件通信
1.父组件通过props属性给子组件通信 //父组件 <template> <child :show="is_showshare" :age="age& ...
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩 源码在文末. 前言 上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
- React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
最新文章
- CNCF案例研究:奇虎360
- CCNP第四天(2) 配置、校验OSPF特殊区域类型-完全Stub区域
- PHP中的traits
- [UVALive 7143]Room Assignment(Dp)
- 建立ARM交叉编译环境 (arm-none-linux-gnueabi-gcc with EABI)
- linux内核测试,Linux内核测试的生命周期
- 华为数据之道 pdf_华为官方出品,华为数据之道新书来了
- app开发第二次总结
- java 不退出_(Java)如果我在其外面点击,JPopupMenu将不会关闭
- 1405.最长快乐字符串
- 【ISWC2021】当知识图谱遇上零样本视觉问答
- windows 游戏编程大师技巧(第二版)学习之路-1
- 面试官又问我Select * 为什么效率低下?
- 小米平板2可以装鸿蒙系统,搞定LOL?Win10版小米平板2游戏性能实测
- J-LINK 软件下载地址
- 薄如便签纸的概念闪存U盘:贴在电脑上就能用
- 家用洗地机到底好不好用?家用洗地机分享
- [激光原理与应用-25]:《激光原理与技术》-11- 激光产生技术-非线性技术之激光倍频、非线性晶体CLBO、BBO、LBO
- bootstrap模态框 模态框手动关闭
- 覃超数据结构(三)优先队列
热门文章
- 字节流练习:图片复制
- Oralce 数据库 - 查询数据库所有的表和视图实例演示,查询指定用户下所有表和视图方法
- Python 技术篇-基于PyHook3+threading多线程实现鼠标单击事件和双击事件的识别实例演示
- Python 用smtplib库发邮件报错:[WinError 10061] 由于目标计算机积极拒绝,无法连接。解决办法
- java中字符串的截取
- c语言或者cpp中位运算的技巧
- Mallet Java【Windows下配置】(解决Ant安装可能会失败的解决方案)
- ajax jq 图片上传请求头_如何使用js或jQuery向Ajax请求添加自定义HTTP头?
- 设计模式---设计模式的分类及六大原则
- 类成员函数作为函数参数/回调函数 出现error C3867