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 ...
随机推荐
- tmp目录自动清除和tmpwatch命令
习惯性的将一些临时文件放在tmp目录下,让其自然删除.同时,为了保证tmp目录不爆满,系统默认情况下每日会处理一次tmp目录文件,原理就是使用了tmpwatch.在系统最小安装情况下,这个功能是没有安 ...
- vue 监听store中的数值
computed: { isFollow () { return this.$store.state.demo.id; //需要监听的数据 } }, watch: { isFo ...
- js 异步加载
document 加载 document.write("<scr" + "ipt src=\"js/jquery.js\"></sc ...
- ThinkPHP5集成JS-SDK实现微信自定义分享功能
最近开发一个项目,需要将链接分享给好友时能够自定义标题.简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文. 一.准备工作 1.认证的公众号 不管是订阅号还是服 ...
- Activiti手动执行的应用(UserTask)
工作流模拟某公司请假流程情景如下: 1.开发人员请假流程,如果开发人员请假,如果请假天数小于3天,组长批准,人事批准即可请假. 2.如果请假大约三天,需要项目经理或者产品经理批准,并且项目总监 ...
- django学习之——创建项目
创建项目让我迷茫了会: 直接cmd 执行django-admin.py startproject pro_name 肯定是不行的 必须cd到 D:\Program Files\Python3.3.5 ...
- notepad++自动对齐使用空格代替Tab并将空格显示为小点
一.说明 对大多数语言而言自动对齐使用空格还是tab对编译运行并没有什么影响,但对python问题就很大:因为就算是缩进看起来是一样的但某些行用空格某些行用tab运行会报错. 另外除了空格替换tab外 ...
- java method.isBridge
作者:木女孩链接:https://www.zhihu.com/question/54895701/answer/141623158来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- js之窗口位置
IE,Safari,Opera和Chrome都提供了screenLeft和screemTop属性,分别用于表示窗口相对于屏幕左边和上边的位置.FireFox则提供了screenX和screenY.使用 ...
- LaTeX技巧10：LaTeX数学公式输入初级入门
LaTeX最强大的功能就是显示美丽的数学公式,下面我们来看这些公式是怎么实现的. 1.数学公式的前后要加上 $ 或 \( 和 \),比如:$f(x) = 3x + 7$ 和 \(f(x) = 3x + ...