单一事件中心管理组件通信( 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属性来实现 传递普通字符 ...
随机推荐
- ASP.NET MVC的ContentResult
ASP.NET MVC的ContentResult返回简单的纯文本内容,可通过ContentType属性指定应答文档类型,通过ContentEncoding属性指定应答文档的字符编码. 一个例子来演习 ...
- Commonjs、AMD、CMD
CommonJS 该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口 require(& ...
- Redis散列操作
Redis的散列可以将多个键值对存储在一个Redis键里面.可以把这种数据聚集看作是数据库中的行或者文档数据库中的文档. (添加和删除键值对) HMGET : HMGET key-name key [ ...
- printf中用法详解
%c 单个字符 %d 十进制整数 %f 十进制浮点数 %o 八进制数 %s 字符串 %u 无符号十进制数 %x 十六进制数 %% 输出百分号% printf的格式控制的完整格式: % - 0 m ...
- RocketMQ NameServer
NameServer 路由管理,服务注册,服务发现.(类比为soa框架中的zookeeper) 一.路由管理 1.路由注册,由 Broker 向 NameServer 发送心跳,NameServer ...
- BOM（JavaScript高程笔记）
再次编辑于20160115 一.window对象 双重角色 JS访问浏览器窗口的接口 ECAMAscript规定的Global对象 1.全局作用域 所有在全局作用域中声明的变量.函数都会变成windo ...
- python的深浅拷贝以及fromkeys的用法
1.join()的用法:使用前面的字符串.对后面的列表进行拼接,拼接结果是一个字符串 # lst = ["alex","dsb",'wusir','xsb'] ...
- CentOS7添加入windows2008的AD域
采用域控对用户权限进行限制的时候,经常会出现需要将linux加入windows域,毕竟windows的AD域超级强大.用户名可以由windows进行统一管理,方便办公使用.下面简单介绍如何进行配置. ...
- Windows7系统如果安装&升级IE11浏览器
作为一个前端工作人员,IE678简直就是噩梦,还好现在大多数网站已经开始放弃了对IE6/7/8的支持了. 由于Win7系统默认是安装的IE8,所以在打开部分网站时会提示:IE浏览器版本过低.解决方法如 ...
- 【mpvue】使用Mpvue撸一个简单的小程序
一.快速创建一个mpvue项目 全局安装 vue-cli (如果有就不需要装了) 创建一个基于mpvue-quickstart模板的新项目,记得选择安装vuex vue init mpvue/ ...