<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 单一事件管理
var Event = new Vue(); // A组件发送数据
var A = {
data() {
return {
a: '我是a数据'
}
},
template: `
<div>
<span>{{a}}</span>
<button @click="send">我是组件a</button>
</div>
`,
methods: {
send() {
Event.$emit('data-a', this.a)
}
}
}; // B组件发送数据
var B = {
data() {
return {
b: '我是b数据'
}
},
template: `
<div>
<span>{{b}}</span>
<button @click="send">我是组件b</button>
</div>
`,
methods: {
send() {
Event.$emit('data-b', this.b)
}
}
}; // C组件接受数据
var C = {
data() {
return {
a:'',
b:''
}
},
template: `
<div>
<span>{{a}}</span>
<span>{{b}}</span>
</div>
`,
mounted() {
Event.$on('data-a',function(data){
this.a = data
}.bind(this));
Event.$on('data-b',function(data){
this.b = data
}.bind(this)); }
}; window.onload = function() {
var app = new Vue({
el: '#box',
components: {
'com-a': A,
'com-b': B,
'com-c': C
}
})
}
</script>
</head> <body>
<!-- 组件间得通信管理 -->
<div id="box">
<div>
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</div>
</body> </html>
定义了一个全局对象，组件把数据发送出去，任何组件都可以接收到数据