<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template id="a">
<div>
<h3>A组件：{{name}}</h3>
<button @click="send">将数据发送到组件C</button>
</div>
</template>
<template id="b">
<div>
<h3>B组件：{{age}}</h3>
<button @click="send">将数据发送到组件C</button>
</div>
</template>
<template id="c">
<div>
<h3>B组件：{{name}},{{age}}</h3>
</div>
</template>
<script>
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false;//阻止vue启动时生成生产消息
//定义一个空实例
let Event=new Vue();
let A={
template:'#a',
data(){
return {
name:"tom"
}
},
methods:{
send(){
Event.$emit('data-a',this.name);
}
}
};
let B={
template:'#b',
data(){
return {
age:12
}
},
methods:{
send(){
Event.$emit('data-b',this.age)
}
},
mounted(){
}
};
let C={
template:'#c',
data(){
return {
name:"",//从组件A中获取姓名
age:0//从组件B中获取年龄
}
},
mounted(){
Event.$on('data-a',name=>{
this.name=name;
});
Event.$on('data-b',age=>{
this.age=age;
})
}
};
new Vue({
el:"#container",
data:{
name:"tom",
user:{
name:"张三",
age:12
}
},
components:{
'my-a':A,
'my-b':B,
'my-c':C
}
})
</script>
</body>
</html>
