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 ...
随机推荐
- CF1117E Decypher the String
如果我们能询问一个排列的话,我们就可以得到这个置换,然后反向求解. 但现在字符集只有26. 考虑26^3>1e5. 用一个三维坐标去映射到一个一维整数,然后就可以构造排列了. #include& ...
- 6.4 操作契约 Operation Contracts
4.操作契约 Operation Contracts “用例描述”的补充 强调: 用例中重要的动作,其开始与结束是需要一些约束 4.5 操作契约的后置条件 定义Definition 后 ...
- 『Re』正则表达式模块_常用方法记录
『Re』知识工程作业_主体识别 一个比较完备的正则表达式介绍 几个基础函数 re.compile(pattern, flags=0) 将正则表达式模式编译成一个正则表达式对象,它可以用于匹配使用它的m ...
- 【Oracle】【1】查询N分钟之前的数据
--查询距离现在N分钟前的数据 1440:表示一天有1440分钟 SYSDATE - 10 :表示10天前 参考博客: 1,oracle 查询十分钟之前的数据 - 胡金水的博客 - CSDN博客 ht ...
- csu oj 1344: Special Judge
Description Given a positive integer n, find two non-negative integers a, b such that a2 + b2 = n. I ...
- leetcode-algorithms-25 Reverse Nodes in k-Group
leetcode-algorithms-25 Reverse Nodes in k-Group Given a linked list, reverse the nodes of a linked l ...
- python low版线程池
1.low版线程池设计思路:运用队列queue 将线程类名放入队列中,执行一个就拿一个出来import queueimport threading class ThreadPool(object): ...
- python_数据类型
数据类型 1.数字类型 整型(Int) - 通常被称为是整型或整数,是正或负整数,不带小数点.Python3 整型是没有限制大小的,可以当作 Long 类型使用,所以 Python3 没有 Pytho ...
- 提高Bash使用效率的方法
环境:centos6.5 1.移动 Ctrl + a :移到命令行首Ctrl + e :移到命令行尾 Ctrl + xx:在命令行首和光标之间移动 左右键移动字符 Ctrl+左右键移动单词(不记快捷键 ...
- 常用加密算法简单整理以及spring securiy使用bcrypt加密
一.哈希加密 1.md5加密 Message Digest Algorithm MD5(中文名为消息摘要算法第五版) https://baike.baidu.com/item/MD5/212708?f ...