Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue2-单一事件管理组件通信</title>
<script src="vue.js"></script>
<script type="text/javascript"> //准备一个空的实例对象
var Event = new Vue(); //组件A
var A = {
template: `
<div>
<span>我是A组件的数据->{{a}}</span>
<input type="button" value="把A数据传给C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("a-msg", this.a);
}
},
data () {
return {
a: "我是a组件中数据"
}
}
};
//组件B
var B = {
template: `
<div>
<span>我是B组件的数据->{{a}}</span>
<input type="button" value="把B数据传给C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("b-msg", this.a);
}
},
data () {
return {
a: "我是b组件中数据"
}
}
};
//组件C
var C = {
template: `
<div>
<h3>我是C组件</h3>
<span>接收过来A的数据为: {{a}}</span>
<br>
<span>接收过来B的数据为: {{b}}</span>
</div>
`,
mounted () {
//接收A组件的数据
Event.$on("a-msg", function (a) {
this.a = a;
}.bind(this)); //接收B组件的数据
Event.$on("b-msg", function (a) {
this.b = a;
}.bind(this));
},
data () {
return {
a: "",
b: ""
}
}
};
window.onload = function () {
new Vue({
el: "#box",
components: {
"dom-a": A,
"dom-b": B,
"dom-c": C
}
});
}; </script>
</head>
<body>
<div id="box">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div> </body>
</html>
Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输的更多相关文章
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- 使用EventBus实现兄弟组件之间的通信
使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...
- VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- Vue 兄弟组件之间传递数值
Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...
- React生命周期, 兄弟组件之间通信
1.一个demo(https://www.reactjscn.com/docs/state-and-lifecycle.html) class Clock extends React.Componen ...
- vue 兄弟组件之间的传值
一. 子传父,父传子. 二. 1.兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据 2.创建一个Vue的实例,让各个兄弟共用同一个事件机制. 3.传递数据方,通过一个事件触发bus.$emi ...
- 在npm Vue单页面的环境下，兄弟组件之间通信Bus
参考1:https://www.cnblogs.com/wangruifang/p/7772631.html 参考2:https://www.jianshu.com/p/b3d09c6c87bf 在m ...
- vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
随机推荐
- 如何在mmseg3添加词库
一.了解几个文件 ll /usr/local/mmseg/etc/mmseg.ini uni.lib 编译后的词库,给sphinx 用的unigram.txt 原词库给人看的, 在这里面人工添加自 ...
- python2.7 目录下没有scripts
1.python2.7 配置环境完成或,python目录下没有scripts目录,先下载setuptools,cmd下载该目录下,输入python setup.py install 2.完成后,pyt ...
- Leetcode 128 *
class Solution { public: int longestConsecutive(vector<int>& nums) { ; unordered_map<in ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- loj 10117 简单题（cqoi 2006)
题目来源:CQOI 2006 有一个 n 个元素的数组,每个元素初始均为 0.有 m条指令,要么让其中一段连续序列数字反转——0变 1,1 变 0(操作 1),要么询问某个元素的值(操作 2). 例如 ...
- oracle 分组查询
常用的函数: ·:统计个数:COUNT(),根据表中的实际数据量返回结果: ·:求和:SUM(),是针对于数字的统计,求和 ·:平均值 ...
- 【转】MVC5学习笔记 BindAttribute
// POST: Movies/Create // 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关 // 详细信息,请参阅 http://go.microsoft.com/fwlink/?L ...
- CentOS查询系统版本
1.cat /proc/version 2.cat /etc/redhat-release 3.cat /proc/version 4.uname -a
- Vue--项目开发之实现tabbar功能来学习单文件组件2
上一篇文章里item.vue里的span标签内容是写死了,但是我们不希望写死 所以对于五个tab选项的标题需要从外部传入,也就说 需要在item.vue里的script里写上 export defau ...
- install the Mondo Rescue utility in Ubuntu 12.04 or 12.10.
1. Open a terminal window. 2. Type in the following commands, then hit Enter after each. wget ft ...