vue30-单一事件管理组件通信: vuex
2024-09-04 22:20:59
------------------------------------------------------
可以单一事件管理组件通信: vuex
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={ //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> <!--
我是A组件 -> 我是a数据 把A数据给C
我是B组件 -> 我是b数据 把B数据给C
我是C组件 接收过来的A的数据为: 我是a数据
接收过来的B的数据为: 我是b数据
-->
最新文章
- ios基础篇（三十）—— AFNetworking的使用
- LintCode Two Strings Are Anagrams
- Ajax发送异步请求（四步操作）
- the usage of linux command "expect"
- Ubuntu 安装OpenCV3.0.0
- cookie&session&servletContext
- 高效的使用Response.Redirect解决一些不必要的问题（转载）
- CetnOS minimal 网络不可用
- 数据结构（主席树,Bit）：XTU 1247/COGS 2344. pair-pair
- django 开发简易博客（二）
- CountDownLatch和CyclicBarrier的区别（转）
- HDU 1054 Strategic Game（树形DP）
- Angular2.0的项目架构
- httpd基础配置和虚拟主机的配置方法
- Android视频录制从不入门到入门系列教程(四)————Camera Parameter
- JMeter-java.lang.OutOfMemoryError: PermGen space错误
- 小甲鱼Python第十六讲课后习题--017函数
- luogu P4360 [CEOI2004]锯木厂选址
- 让InstallShield 2015 Limited Edition for Visual Studio 2015生成的setup.exe双击时以管理员权限运行
- [转]如何取得当前正在执行的shell脚本的绝对路径？