Vue2--非父子组件通信笔记
核心要点：
var Event=new Vue();
Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));
示例代码：
参考智能社视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
//准备一个空的实例对象
var Event=new Vue(); var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this)); //接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
}; window.onload=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
</html>
Vue2--非父子组件通信笔记的更多相关文章
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue组件通信之非父子组件通信
什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit 触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on 监听当前实例上的自定义事件.事件可以 ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
- Vue 组件 非父子组件通信
有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
随机推荐
- UVA - 10689 Yet another Number Sequence （矩阵快速幂求斐波那契）
题意:已知f(0) = a,f(1) = b,f(n) = f(n − 1) + f(n − 2), n > 1,求f(n)的后m位数. 分析:n最大为109,矩阵快速幂求解,复杂度log2(1 ...
- SPOJ - AMR11H Array Diversity （排列组合）
题意:给定n个数,求包含最大值和最小值的子集(数字连续)和子序列(数字不连续)的个数. 分析: 1.如果n个数都相同,则子集个数为N * (N + 1) / 2,子序列个数为2N-1. 2.将序列从头 ...
- LightOJ - 1282 Leading and Trailing （数论）
题意:求nk的前三位和后三位. 分析: 1.后三位快速幂取模,注意不足三位补前导零. 补前导零:假如nk为1234005,快速幂取模后,得到的数是5,因此输出要补前导零. 2.前三位: 令n=10a, ...
- 洛谷 P1043 数字游戏
题目传送门 解题思路: 跟石子合并差不多,区间DP(环形),用f[i][j][s]表示从i到j分成s段所能获得的最大答案,枚举断点k,则f[i][j][s] = min(f[i][j][s],f[i] ...
- java String字符串判断
判断空字符串:StringUtils.isBlank StringUtils.isBlank(null) = true StringUtils.isBlank("") = true ...
- jQuery网页定时弹出广告
1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...
- 关于torch.nn.Conv2d的笔记
先看一下CLASS有哪些参数: torch.nn.Conv2d( in_channels, out_channels, kernel_size, stride=1, padding=0, dilati ...
- 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring Bean的配置及常用属性
作为 Spring 核心机制的依赖注入,改变了传统的编程习惯,对组件的实例化不再由应用程序完成,转而交由 Spring 容器完成,在需要时注入应用程序中,从而对组件之间依赖关系进行了解耦.这一切都离不 ...
- SAP_BASIS常用事务代码
1.SM66:监控当前系统的所有进程: 2.SM50/SM51:监视当前客户端的所有进程: 3.AL08:查看系统当前用户登录情况: 4.ST22:查看系统发生的DUMP: 5.ST03:查看系统当前 ...
- Android 心跳包心跳连接 如何实现android和服务器长连接呢？推送消息的原理
前言:现在的大多数移动端应用都有实时得到消息的能力,简单来说,有发送消息的主动权和接受消息的被动权.例如:微信,QQ,天气预报等等,相信好处和用户体验相信大家都知道吧. 提出问题:这种功能必须涉及cl ...