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 ...
随机推荐
- ACM-选人问题(救济金发放）
n(n<20)个人站成一圈,逆时针编号为1-n.有两个官员,A从1开始逆时针数,B从n开 始顺时针数.在每一轮中,官员A数k个就停下来,官员B数m个就停下来(注意有可能两个 官员停在同一个人上) ...
- Boosting
Boosting is a greedy alogrithm. The alogrithm works by applying the weak learner sequentially to wei ...
- 改写了禁用或启用oracle数据库的约束的存储过程
改写了网上某位大侠(最开始的源头是哪位没记住)写的禁用或启用oracle数据库所有约束的存储过程,增加了异常控制,以使发生异常时也可以执行下去. –调用过程: 执行前先 set serveroutpu ...
- [LeetCode] 111. Minimum Depth of Binary Tree ☆(二叉树的最小深度)
[Leetcode] Maximum and Minimum Depth of Binary Tree 二叉树的最小最大深度 (最小有3种解法) 描述 解析 递归深度优先搜索 当求最大深度时,我们只要 ...
- vector list map set等容器某些函数的使用区别
map, set, vector erase的正确使用方法 一.erase 的用法区别 STL中的容器按存储方式分为两类,一类是按以数组形式存储的容器(如:vector .deque); 另一类是以不 ...
- DDR3和eMMC区别
DDR3内存条和eMMC存储器区别: 1. 存储性质不同:2. 存储容量不同:3. 运行速度不同:4. 用途不同. 具体区别如下: 1.存储性质不同:eMMC是非易失性存储器,不论在通电或断电状态下, ...
- java.lang.UnsatisfiedLinkError：no dll in java.library.path
报错:java.lang.UnsatisfiedLinkError:no dll in java.library.path 参考: Java调用Dll时,会出现no dll in java.libra ...
- 将自己的域名解析跳转到博客主页（GitHub中的gitpage跳转）
最近突然迷上了博客,突然又突发奇想,将自己几个月前买的现在限制的域名拿来跳转到自己的csdn博客.经过一番研究,总结---- 把自己的购买的域名(比如我买的circleyuan.top)跳转到CSDN ...
- [Leetcode 881]船救人 Boats to Save People 贪心
[题目] The i-th person has weight people[i], and each boat can carry a maximum weight of limit. Each b ...
- Cracking The Coding Interview5.2
//Given a (decimal - e.g. 3.72) number that is passed in as a string, print the binary representatio ...