vue兄弟组件传值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue兄弟组件传值相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>父子组件</title>
<script type="text/javascript" src="vue 2.js"></script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
<script type="text/javascript">
var Event=new Vue();
var A={
template:`<div>
<span>我是组件A===>{{a}}</span>
<input type="button" value="把值传给C" @click="chuan" />
</div>`,
data(){
return {
a:"我是A的值"
}
},
methods:{
chuan(){
Event.$emit(‘a-msg‘,this.a)
}
}
}
var B={
template:`<div>
<span>我是组件B====>{{b}}</span>
<input type="button" value="把值传给C" @click=‘chuan‘ />
</div>`,
data(){
return {
b:"我是B的值"
}
},
methods:{
chuan(){
Event.$emit(‘b-msg‘,this.b)
}
}
}
var C={
template:`<div>
<span>我是组件C</span><br/>A传递过来的值===>{{a}}<br/>B传递过来的值====>{{b}}
</div>`,
data(){
return {
a:‘‘,
b:‘‘
}
},
mounted(){
var self=this;
Event.$on(‘a-msg‘,(a)=>{
self.a=a;
})
Event.$on(‘b-msg‘,(b)=>{
self.b=b
})
}
}
var vm=new Vue({
el:"#box",
data:{
},
components:{
‘com-a‘:A,
‘com-b‘:B,
‘com-c‘:C
}
})
</script>
</body>
</html>
以上是关于vue兄弟组件传值的主要内容，如果未能解决你的问题，请参考以下文章
vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值