vuejs单一事件管理组件间的通信
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 单一事件管理
var Event = new Vue(); // A组件发送数据
var A = {
data() {
return {
a: '我是a数据'
}
},
template: `
<div>
<span>{{a}}</span>
<button @click="send">我是组件a</button>
</div>
`,
methods: {
send() {
Event.$emit('data-a', this.a)
}
}
}; // B组件发送数据
var B = {
data() {
return {
b: '我是b数据'
}
},
template: `
<div>
<span>{{b}}</span>
<button @click="send">我是组件b</button>
</div>
`,
methods: {
send() {
Event.$emit('data-b', this.b)
}
}
}; // C组件接受数据
var C = {
data() {
return {
a:'',
b:''
}
},
template: `
<div>
<span>{{a}}</span>
<span>{{b}}</span>
</div>
`,
mounted() {
Event.$on('data-a',function(data){
this.a = data
}.bind(this));
Event.$on('data-b',function(data){
this.b = data
}.bind(this)); }
}; window.onload = function() {
var app = new Vue({
el: '#box',
components: {
'com-a': A,
'com-b': B,
'com-c': C
}
})
}
</script>
</head> <body>
<!-- 组件间得通信管理 -->
<div id="box">
<div>
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</div>
</body> </html>
定义了一个全局对象，组件把数据发送出去，任何组件都可以接收到数据
vuejs单一事件管理组件间的通信的更多相关文章
- vuejs组件交互 - 02 - 事件中心管理组件间的通信
事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...
- 刚学的vue.js的单一事件管理组件通信
第一次在博客园写的技术分享,写的不好的话各位大神多体谅,好啦进入主题 说说思路 首先 第一步,准备一个空的示例对象 var Event=new Vue(); 第二步,准备发送的数据 Event.$em ...
- vue30-单一事件管理组件通信: vuex
------------------------------------------------------ 可以单一事件管理组件通信: vuex var Event=new Vue(); Event ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- ZeroMQ(java)之I/O线程的实现与组件间的通信
算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- (尚033)Vue_案例_slot(组件间的通信4:slot)
1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿 ...
- angular组件间的通信（父子、不同组件的数据、方法的传递和调用）
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
随机推荐
- 小机器人自动回复（python，可扩展开发微信公众号的小机器人）
api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...
- Java 文件句柄泄露问题解决小记
维护 WebIDE 免不了要管理很多的文件, 自从我们线上系统增加了资源回收功能,便一直受一个问题困扰:后台线程解绑目录时偶尔报错,看症状因为是某些文件被占用了,目录不能解绑.但是由于系统中很多地方都 ...
- BZOJ 1875: [SDOI2009]HH去散步（矩阵乘法）
首先，题意就把我们引向了矩阵乘法，注意边长m<=60，那么就按边建图，变成一个120个点的图，然后乱搞就行了。 PS：WA了N久改了3次终于A了QAQ CODE: #include<cst ...
- linux下载时提示请尝试移除磁盘中不需要的文件并重试，或者保存到其他位置
因为我是用虚拟机装的linux,所以当时就分配了20G硬盘,下载了几个应用后再下载就提示我这个了.一开始我还以为是因为下载链接的问题,后来才知道原来是因为/tmp的满了. 然后我输入以下连个命令就能正 ...
- maven lean install 的时候出错 Failed to clean project
问题解决1 : 这种情况是属于 本地有多个 java 线程,关掉其中不用的,或者 都关闭就可以了. 问题解决 2 : Caused by: org.springframework.beans.f ...
- linux网络编程1 最简单的socket编程
下面是socket编程的服务器端 先看一个图,1 #include<stdio.h> #include<stdlib.h> #include<string.h> # ...
- Oracle 数据库启用归档
一.关闭数据库 二.启动数据库到mount状态 三.启用或停止归档模式 启用 停用 四.开启数据库并查看归档模式 参考文档:http://blog.csdn.net/feifei_86/article ...
- 图片流量节省大杀器：基于腾讯云CDN的sharpP自适应图片技术实践
目前移动端运营素材大部分依赖图片,基于对图片流量更少,渲染速度更快的诉求,我们推动CDN,X5内核,即通产品部共同推出了一套业务透明,无痛接入的CDN图片优化方案:基于CDN的sharpP自适应图片无 ...
- AndroidStudio运行项目出现Unsupported method: AndroidProject.getPluginGeneration()错误解决办法
一.错误描述 今天在使用AndroidStudio运行项目时出现了一个Unsupported method: AndroidProject.getPluginGeneration()错误,如下图所示: ...
- UNIX 网络编程知识，函数积累
1: fprintf()#include <stdio.h> int fprintf( FILE *stream, const char *format, ... );fprintf()函 ...