单一事件中心管理组件通信( vuex )
有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
补充$emit ,$on的讲解
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
//准备一个空的实例对象
var Event=new Vue(); var A={
//ES6新写法
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);//触发事件，发送数据
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
//注意：一个组件是一个单个作用域，这里的a是局部变量，不是组件a里面的数据
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){ //生命周期(ready)挂载的时候调用
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){//监听事件，接收数据
this.a=a;
}.bind(this)); //接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
}; window.onload=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
</html>
对代码的个人理解：
1. 发送数据的组件里面
//ES6新写法
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);//触发事件，发送数据
}
},
2. 接收数据的组件里面
Event.$on('a-msg',function(a){//监听事件，接收数据
this.a=a;
}.bind(this));
3. ES6语法
//ES6新写法 ：`` 键盘Esc下面的键，数字1左边的键，里面字符串之间可以用空格
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
单一事件中心管理组件通信( vuex )的更多相关文章
- webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效
先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...
- vue2 单一事件中心管理组件通信
- vue30-单一事件管理组件通信: vuex
------------------------------------------------------ 可以单一事件管理组件通信: vuex var Event=new Vue(); Event ...
- vuejs组件交互 - 02 - 事件中心管理组件间的通信
事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...
- vue.js组件之j间的通讯四,通过单一事件来管理组件通讯
总结; 首先需要创建是一个空实例: var vm = new Vue(); vm.$emit(事件,数据); vm.$on(事件,function(data){ }bind(this))
- vue.js组件之j间的通讯三,通过单一事件来管理组件通讯
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 刚学的vue.js的单一事件管理组件通信
第一次在博客园写的技术分享,写的不好的话各位大神多体谅,好啦进入主题 说说思路 首先 第一步,准备一个空的示例对象 var Event=new Vue(); 第二步,准备发送的数据 Event.$em ...
- vue2.X 组件通信（$emit $on props）
1.index.html 子组件直接修改父组件的数据 组件通讯: vm.$emit(); vm.$on(); 父组件和子组件: 子组件想要拿到父组件数据: 通过 props 之前,子组件可以更改父组 ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
随机推荐
- 使用 ReentrantLock 和 Condition 实现一个阻塞队列
前言 从之前的阻塞队列的源码分析中,我们知道,JDK 中的阻塞队列是使用 ReentrantLock 和 Condition 实现了,我们今天来个简易版的.代码如下: 代码 public class ...
- 链接正常但IE浏览器无法显示网页的几种情况
一.感染病毒木马所致 这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但一直无响应. 右击任务栏/任务管理器/进程,查看.如果CPU占用率100%,可以断定是感染了病毒,这时要查 ...
- HDU1257(dp)
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- JSON: jasckson 字段 过滤
有这样一个场景存在一个model类如果User,这里省略了getter/setter方法 class User { String name; String uuid; Long created; Lo ...
- python中numpy.r_和numpy.c_
例子 import numpy as np a = np.array([1, 2, 3]) b = np.array([4, 5, 6]) c = np.c_[a,b] print(np.r_[a,b ...
- JavaScript小细节点罗列（2）
break 语句和 continue 语句 break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行. break语句用于跳出代码块或循环. var i = 0; while( ...
- ArcGIS Server + ArcGIS Portal 10.5
1.安装IE11 2. 域名需要在C:\Windows\System32\drivers\etc\host文件中添加 127.0.0.1 机器名.域名 win2008.smartmap.com 19 ...
- 新飞电器的BI建设案例
一.河南新飞电器简介 河南新飞电器在制造行业内属于领先地位,其信息化程度较高,面对系统多且杂乱的情况,一个集中展示数据的平台就显得尤为重要.使用BI就是为了在一个相对统一的平台展示需要查看的数据,供决 ...
- HDFS namenode 写edit log原理以及源码分析
这篇分析一下namenode 写edit log的过程. 关于namenode日志,集群做了如下配置 <property> <name>dfs.nameservices< ...
- Azure 托管镜像和非托管镜像对比
目前中国区 Azure 也已经可以使用命令制作托管镜像了.但对于托管镜像和非托管镜像,就像托管磁盘和非托管磁盘一样,很多人可能一开始无法理解.这里就此进行了一个简单对比: 通过对比测试,这里总结了这两 ...