版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/slq_lly/article/details/83542753
vue传递数据有很懂中方法,组件之间传参,可以建一个父级,把组件信息传给父级,然后再用props继承过来,这是props传递。
今天说的是单一事件管理通信,这个可以简单解决传参问题
做这个我们首先得准备一个空的实例对象,为什么要准备,因为准备了空对象就之后,这个空对象上就会挂上各种方法,什么$on啊,$emit啊 ,这个空对象一定要是全局的,为什么,因为每个组件都要访问,所以首先全局定义一个空的实例对象,基本的语法格式如下:
var Event=new Vue();
Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));//在这个里面this指向会发生变化,要么bind一下,要么用_this代替this来重定向
实例代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件通信</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
</style>
<script src="vue.js"></script>
<script>
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A组件</span> ->
<ul v-for="(k,v) in a">
<li>{{k}}</li>
</ul>
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:{
a:'nihao',
b:'ni bu hao'
}
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C">
</div>
`,
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
Event.$on('a-msg',function(res){
this.a=res;
}.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>