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