之前说过了父子级之间是如何传递数据的，接下来讲一下非父子级如何传递数据
1.创建一个空的vue实例 例如：var datavue=new Vue();
2.在数据源组件上添加发射方法，将想要传送的数据发射出去 例如：send(){datavue.$emit("edata",this.name) }
3.在接收数据的组件接收方法，在合适的时间监听传送过来的数据 例如datavue.$on('edata',name=>{this.name=name;}）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>非父子之间的数据通信</title><script src="js/vue.js"></script></head><body><div id="test"><vue_a></vue_a><vue_b></vue_b></div><template id="vue_a"><div><p>这是A组件</p><p>A组件名字是：{{name}}</p><input type="button" value="发送数据" @click='send'></div></template><template id="vue_b"><div><p>这是B组件</p><p>B组件接收的数据是{{name}}</p></div></template><script>var datavue=new Vue(); // 1建立一个空的vue组件var A={template:'#vue_a',data() {return {name:'奥巴马'}},methods: {send(){datavue.$emit("edata",this.name)//2.使用空vue发送想要传输的数据}},}var B={template:'#vue_b',data() {return {name:''}},mounted() { //在一定的时机接收发送过来的数据datavue.$on('edata',name=>{this.name=name;})},}new Vue({el:'#test',components:{'vue_a':A,'vue_b':B}})</script></body></html>
