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.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
随机推荐
- Java Web(一) Servlet详解！！
这篇文章到上一篇,距离的有点遥远呀,隔了大概有两个月把,中间在家过了个年,哈哈~ 现在重新开始拾起,最近在看一本个人觉得很棒的书,<Java Web 整合开发王者归来>,现在写的这一系列基 ...
- Frogs
Problem Description There are m stones lying on a circle, and n frogs are jumping over them.The ston ...
- [Hadoop] - TaskTracker源码分析(TaskTracker节点健康状况监控)
在TaskTracker中对象healthStatus保存了当前节点的健康状况,对应的类是org.apache.hadoop.mapred.TaskTrackerStatus.TaskTrackerH ...
- C# 6 与 .NET Core 1.0 高级编程 - 40 ASP.NET Core（下）
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 40 章 ASP.NET Core(下)),不对的地方欢迎指出与交流. 章节出自<Professiona ...
- jQuery UI 实例 - 自动完成（Autocomplete）
http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...
- 实现 $.extend 的深复制和浅复制
$.extend 是jquery常用的一个方法,该方法通过传第一个布尔型参数可以指定为深复制还是浅复制,如何使用不在本文讨论. 先来理解下什么是深复制: var ob1 = {'name' : 'Ja ...
- linux下apache，php的安装
apache的安装 1.下载httpd-2.4.16.tar.gz, apr-1.5.2.tar.gz,apr-util-1.5.4.tar.gz,pcre-8.37.zip,解压 2.注意看apac ...
- bootstrap select2 参数详解
Select2使用示例地址: https://select2.github.io/examples.html Select2参数文档说明: https://select2.github.io/opti ...
- iOS回顾笔记（ 01 ）
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 【转】对于HttpClient和HtmlUnit的理解
原文地址:http://www.haohaoblog.com/?p=1327&utm_source=tuicool 做Java编程的人其实,很多不懂SEO,也不知道如何让百度收录等等,当然,对 ...