平行组件的传参需要额外借助定义一个vue对象（var vm1 = new Vue（{}））通过这个对象的$emit进行推送vm.$emit("要推送给谁",推送的内容）。。。。在平行组件当中通过自定义的对象vm.$on("谁要接受"，function（msg）{ //要推送给谁和谁要接受，他们两个的值是一样的，都是同一个事件
这个函数的参数就是平行组件传过来的参数
})
例如下面代码：
<div id="out"> //容器
<v-a></v-a>
<v-b></v-b>
<v-c></v-c>
</div>
<template id="aa">//a组件
<div>
<h3>a组件</h3>
<p>{{str}}</p>
<button @click="tap()">发送数据</button>
</div>
</template>
<template id="bb">//b组件
<div>
<h3>b组件</h3>
<p>{{str}}</p>
<button @click="tap()">发送数据</button>
</div>
</template>
<template id="cc">//c组件
<div>
<h3>c组件</h3>
<p>接收数据aa——————{{stt}}</p>
<p>接收数据bb——————{{sty}}</p>
</div>
//把a。b组件的str发送到c组件
</template>
</body>
<script type="text/javascript">
var vm1 = new Vue({});额外定义的vue对象，通过这个对象进行传值
var vm = new Vue({
el:'#out',
components:{
'v-a':{
template:'#aa',
data:function(){
return{
str:'我是aa'
}
},
methods:{
tap(){
vm1.$emit('isa',this.str)//进行推送
}
}
},
'v-b':{
template:'#bb',
data:function(){
return{
str:'我是bb'//进行推送
}
},
methods:{
tap(){
vm1.$emit('isb',this.str)//进行推送
}
}
},
'v-c':{
template:'#cc',
data:function(){
return{
stt:'',
sty:''
}
},
mounted(){
vm1.$on('isa',function(msg){.//接受的后一个值是一个函数
this.stt = msg
}.bind(this))//进行接受
vm1.$on('isb',function(msg){
this.sty = msg
}.bind(this))
},
methods:{
},
computed:{
},
components:{
}
}
}
})
网友评论