组件通信 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>
组件通信 eventtBus的更多相关文章
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- vue.js入门（3）——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- Intent进行组件通信的一些体会
Intent进行组件通信的原理 l Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...
- 进程外组件通信之免注册com通信【原创】
最近在搞进程外组件通信的东西,写了个demo,免注册的,一直没调通,其实就是两个问题卡了好几天,也没找到有用的资料,试了好几天终于才解决,现简单记录下来,免得大家跟我走一样的弯路.下面com端程序名称 ...
- vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
- React之组件通信
组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue子父组件通信
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...
随机推荐
- YV12和NV12格式
害怕搞忘 直接保存图片
- 异步任务分发模块Celery
Celery简介 Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单. celery适用异步处理问题,当遇到发送邮件.或者文件上传, 图像处理等等一些比较耗时的 ...
- Python深度学习读书笔记-4.神经网络入门
神经网络剖析 训练神经网络主要围绕以下四个方面: 层,多个层组合成网络(或模型) 输入数据和相应的目标 损失函数,即用于学习的反馈信号 优化器,决定学习过程如何进行 如图 3-1 所示:多个层 ...
- Hybrid平台
需求说明 离线包管理平台主要负责对需要接入Hybrid平台的应用进行管理,通过这个平台可以实现对应用的静态资源进行构建.发布.生成离线包,版本控制等,核心场景如下: 将需要做预加载的应用在平台上注册, ...
- JS - 语音
语音识别 浏览器支持的还不是很好 语音播放 speechSynthesis.speak(new SpeechSynthesisUtterance('只要是活着的东西,神也杀给你看')); 参见 Web ...
- Python 笔试集（3）：编译/解释？动态/静态？强/弱？Python 是一门怎样的语言
面试题 解释/编译?动态/静态?强/弱?Python 到底是一门怎样的语言? 编译 or 解释? 编译.解释都是指将(与人类亲和的)编程语言翻译成(计算机能够理解的)机器语言(Machine code ...
- 红帽虚拟化RHEV-安装RHEV-M
目录 目录 前言 软件环境 时间同步 更新系统 安装并配置RHEV-M 添加域并为用户授权远程登陆 安装rhevm报告 安装Spice协议 最后 前言 在红帽虚拟化RHEV-架构简介篇中介绍了RHEV ...
- Flink数据流图的生成----简单执行计划的生成
Flink的数据流图的生成主要分为简单执行计划-->StreamGraph的生成-->JobGraph的生成-->ExecutionGraph的生成-->物理执行图.其中前三个 ...
- hibernate 1 连接数据库、操作表
ormapping(对象关系映射):数据库操作框架 缺点: 1.因为hql语句是hibernate内部自动生成,程序员干预不了,不可把控 2.功能比较复杂时不建议使用 优点: 1.比较简单. 2.有数 ...
- 【HANA系列】SAP HANA SQL获取当前日期
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取当前 ...