vue兄弟组件传值

2023-09-16 阅读 23 评论 0

摘要：<!DOCTYPE html><html><head> <title>父子组件</title> <script type="text/javascript" src="vue 2.js"></script></head><body><div id="box"> <com-a></com-a&

<!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)
}
}
}

vue下一页、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
})
}
}