单一事件中心管理组件通信( 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属性来实现 传递普通字符 ...
随机推荐
- git命令学习总结
学习git 主要是因为github官网共享的资源很有学习价值.最近转型JAVA,所有特意去学习了下git软件.git软件可以去官网下载最新版本. 进入 git 仓库目录 右击 选中 Git Bash ...
- HDU3416(KB11-O spfa+最大流)
Marriage Match IV Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- django使用小贴士
问题一: RuntimeError: Model class user.models.UserAccount doesn't declare an explicit app_label 解决方案 方案 ...
- 设计模式原则(1)--Single Responsibility Principle(SRP)--单一职责原则
1.定义: 不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责. 2.使用场景: 如果类A有两个职责:d1,d2.当职责d1需要修改时,可能会导致原本运行正常的职责d2功能产生问题. ...
- 安装cuda8.0时无法安装.net Framework 4.0 错误的解决
作者:朱金灿 来源:http://blog.csdn.net/clever101 在win7 64位旗舰版(带sp1)上安装cuda时到安装Microsoft.NET Framework4.0,一直停 ...
- 怎样删除PeopleSoft进程服务器定义
比如在克隆环境时候,把生产的环境克隆到DEV环境,你可能会在进程调度服务器中看到了生产的进程服务器,例如:你可能会在进程调度的时候选择一个server,但是这个server并没有在psadmin下创建 ...
- 如何将水晶报表(Crystal Report)导入葡萄城报表
当从旧的报表平台迁移到葡萄城报表工具时,意味着有大量的报表设计工作要重复去做,如果有一款工具能够在这些工具之间进行自由转换,就能省去报表开发几乎一半的工作量. 葡萄城报表为兼容其他报表控件,提供了简单 ...
- 用JavaScript写弹窗
每个弹窗的标识var x =0; var idzt = new Array(); var Window = function(config){ ID不重复 idzt[x] = "zhuti& ...
- 排错-tcpreplay回放错误：send() [218] Message too long (errno = 90)
排错-tcpreplay回放错误:send() [218] Message too long (errno = 90) by:授客 QQ:1033553122 问题描述: tcpreplay回放.pc ...
- Win10 开启便签快捷键
前提: Win10系统 方法: 开启便签的快捷键:windows+W 这样就可以打开便签,使用起来非常方便