单一事件中心管理组件通信( 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属性来实现 传递普通字符 ...
随机推荐
- MVC应用程序请求密码的功能(一)
经过一系列的练习,实现了会员注册<MVC会员注册>http://www.cnblogs.com/insus/p/3439599.html,登录<MVC应用程序实现会员登录功能> ...
- AssemblyInfo.cs 详解
前言 ? .net工程(包括Web和WinForm)的Properties文件夹下自动生成一个名为AssemblyInfo.cs的文件,一般情况下我们很少直接改动该文件.但我们实际上通过另一个形式操作 ...
- MSSQL标识ID的修改
今天机缘巧合,无意听到别人闲聊,突发奇想设计一套系统来解决他们的痛点,待我进一步分析下如何执行.回到主题,最近修改ID的工作做了不少.企业补充历史数据用.现总结如下: 1.想把递增ID某一段的ID都加 ...
- Eclipse 各种小图标的含意
- java项目运用server运行(eclipse、myeclipse通用)
右键点击”new“选择“Other”,打开选项 勾选”Show All Wizards“ 然后在搜索处输入server,选择server,点击next 刚进来时此处都是空的,点击Configure r ...
- Substrings（hdu1238）字符串匹配
Substrings Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- HDU3605(KB11-M 状态压缩+最大流)
Escape Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- HDU4960(SummerTrainingDay03-F dp)
Another OCD Patient Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Ot ...
- 100行代码实现现代版Router
原文:http://www.html-js.com/article/JavaScript-version-100-lines-of-code-to-achieve-a-modern-version ...
- apicloud 自定义模块引用aar
apicloud 引入aar包,如果使用apicloud自定义模块的话,如果是一般的jar包,我们需要把jar down到本地然后添加到module的libs中就可以了(不要想着用远程地址了,既然用a ...