您的位置：首页 > 产品设计 > UI/UE

单一事件中心管理组件通信( vuex )

2017-06-06 15:33 344 查看

有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

补充$emit ,$on的讲解

代码：

<!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={
//ES6新写法
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={
//注意：一个组件是一个单个作用域，这里的a是局部变量，不是组件a里面的数据
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(){   //生命周期(ready)挂载的时候调用
//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>

　对代码的个人理解：

1.　发送数据的组件里面

//ES6新写法
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);//触发事件，发送数据
}
},

2.　接收数据的组件里面

Event.$on('a-msg',function(a){//监听事件，接收数据
this.a=a;
}.bind(this));

3.　ES6语法

//ES6新写法 ：`` 键盘Esc下面的键，数字1左边的键，里面字符串之间可以用空格
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航