<!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>
定义了一个全局对象，组件把数据发送出去，任何组件都可以接收到数据