刚学的vue.js的单一事件管理组件通信
2024-09-26 20:17:43
第一次在博客园写的技术分享，写的不好的话各位大神多体谅，好啦进入主题
说说思路
首先
第一步，准备一个空的示例对象
var Event=new Vue();
第二步，准备发送的数据
Event.$emit(事件名称,数据)
第三步，接收数据
Event.$on(事件名称，function(data){
// data
}.bind(this))；
具体代码实现效果如下；
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>-->{{b}}
<input type='button' value='把B数据给C' @click='send'>
</div>`,
methods:{
send(){
Event.$emit('b-msg',this.b)
}
},
data(){
return {
b:'我是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;
});
// 另一种使用this方法
// Event.$on('a-msg',function(a){
// this.a= a;
// }.bind(this));
//接收B的数据
Event.$on('b-msg',function(b){
_this.b= b;
});
}
};
window.onload = function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
})
}
html部分
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
最新文章
- Scala学习笔记（八）：基本类型和操作
- 【转】IOS静态库a文件制作流程
- LightOj 1096 - nth Term （矩阵快速幂，简单）
- 初学dorado
- VC2010 Working Directory
- 微服务--webapi实现，脱离iis，脱离tomcat
- 我搞zabbix的那两天（2）
- iOS 远程消息推送，原理和开发详解篇（新手推荐）
- Servlet知识点总结
- MyBatis xml配置文件详解
- [转]jenkins2 插件安装
- 查询当前局域网下所有IP和物理网卡地址
- UEFI EVENT 全解
- C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net（多个日志配置文件） C# 常用小点
- ThinkPHP3.2.3中M()和D()的区别详解
- .Net进阶系列(4)-Lambda和linq入门（被替换）
- Django框架----跨表查询及添加记录
- Linux  释放Linux 系统预留的硬盘空间
- win10桌面显示我的电脑设置
- avalonJS-源码阅读（3） VMODEL