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.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
随机推荐
- Android EclipseIDE技巧
一.Eclipse配置使用 1.显示行号(Winodw-->Preferences-->General-->Editors-->Text Editors-->勾上右侧的S ...
- IOS任务管理之GCD使用
前言: 前天学了IOS的NSOperation基本使用,我们得知NSOperation也是基于IOS GCD(Grand Central Dispatch)实现,其实在做IOS开发中GCD已经基本上能 ...
- webpack1.x 升级到 webpack2.x 英文文档翻译
近日项目要升级到webpack2.2,原来使用的webpack版本是1.12,在升级项目的同时,翻译一下官方的升级文档,去掉了一些不常用的配置 resolve.root, resolve.fallba ...
- SpringMVC总结的部分教程及使用方法
注:本文只用注解来实现 SpringMVC各种流程图流程图(其他的各种流程图)jsp.xml.action彼此之间的关系,都如何使用spring-mvc.xml如何配置,放在哪里?action中如何转 ...
- .Net开源oss项目进度更新(含小程序接口)
和大家分享下当前OSS开源项目的进度情况: 一. OSS.Common [开源中国] [github] 经过昨天的努力,oss.common项目初步完成了对.net standard的支持,迁移过程本 ...
- [Selenium With C#学习笔记] Lesson-03 超级链接
超级链接或链接是Web页面的基本元素之一,而通过超级链接使得万维网可以互联互通.一个典型的链接如下所示: HTML源码如下所示: <a href="index.html" i ...
- C#基础——类
第一部分:String类 系统内置的处理字符串类型的函数方法类.方便我们对字符串类型进行一系列的处理. +++++String类+++++黑色小扳手 - 属性紫色立方体 - 方法 1.***字符串.L ...
- Lambda表达式和Java集合框架
本文github地址 前言 我们先从最熟悉的Java集合框架(Java Collections Framework, JCF)开始说起. 为引入Lambda表达式,Java8新增了java.util. ...
- mfc---CFileDialog的过滤器
CFileDialog的过滤器每种类型由两部分组成“tda|*.tda”,两种类型之间用“|”隔开
- linux系统常用快捷键
centos 命令快捷键: 挂起:Ctrl+s 解除挂起:ctrl+q 清屏:Ctrl+l 注销或退出:Ctrl+d 命令行光标移动: Ctrl+a 移动到命令行首 Ctrl+e 移动到命令行尾 Ct ...