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.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
随机推荐
- Swift 2.0 UItableView 的简单使用
在IOS开发中,UItableView 的使用真的是最常见最普通的了,现在在自学swift 今天也是这用Swift 写了写 UItableview的使用,还有一些经常出错的地方.下面我先把整个控制器的 ...
- bootstrap3 响应式布局栅格式布局
抓住重点 下面开始实现Bootstrap版本3的Demo 案例 首先去官方网站 http://www.bootcss.com/ 下载 点击 进入 点击 进入 下载 把 相关的js和css 拷贝到项目 ...
- .Net Core迁移到MSBuild的多平台编译问题
一.前言 本篇主要讨论.NET Core应用程序项目结构的主题,重点探索.NET Core应用程序的多平台编译问题,这里指的多平台是指.NET Framework..NET Core App..NET ...
- C#中函数的功能和类型
函数 就是方法是独立完成某项功能的一个个体 函数的的三个好处:1.提高代码的重用性.2.提高功能开发的效率,3.提高代码的可维护性(主要功能). 函数也分为 固定功能函数(这类函数具有可封闭 ...
- request.RequestContextListener
由于是使用spring mvc来做项目,因此脱离了HttpServletRequest作为参数,不能够直接使用request,要想使用request可以使用下面的方法: 在web点xml中配置一个监听 ...
- v3学院带你一次性认清UART、RS-232、RS-422、RS-485的区别
通讯问题,和交通问题一样,也有高速.低速.拥堵.中断等等各种情况.如果把串口通讯比做交通,UART比作车站,那么一帧的数据就好比汽车.汽车跑在路上,要遵守交通规则.如果是市内,一般限速30.40,而高 ...
- win7下使用git
1 安装git for window 2 安装tortoiseGit 3 生成public key 3.1 打开git bash 3.2 创建~/.ssh文件夹 mkdir ~/.ssh 3.3 配置 ...
- 转换器2：ThinkPhp模板转Django模板
前天写了个<ThinkPhp模板转Flask模板> 居然被同事鄙视了,原因是他用Django,我用Flask,为了避免被他继续安利Django的强大.我决定写一个Django模板转换器. ...
- js使用for in遍历时的细节问题
今天在看别人代码过程中被 "for in"搞得有点晕,所以好好研究了一下,写下来分享给对 for in遍历理解有问题的朋友. 基本格式: for (property in expr ...
- 浅谈HTML5中的浮动问题
浮动是我们在前端页面中经常会用到的一种布局方式.那什么是浮动呢? 首先我们先来看一下它的定义.浮动是指让元素脱离文档标准流(脱标),按照指定的方向去横向排列.浮动的取值有两个,分别是float:lef ...