Vue组件的通信---兄弟组件间的通信

        前两部分主要讲的是组件嵌套时其间的通信问题，组件之间除去嵌套，并列也极为常见。解决这类组件的通信问题，在这里学习两种方法：1、使用父组件作为兄弟组件通信的中转点；2、中央事件总线技术。

        一、使用父组件作为中转点

        其主要过程与父子组件间的通信大致相同。假定有A、B两个组件要进行通信，组件A向组件B发送数据，则要将A组件中的数据通过emit方法发射出去并由父组件接收，而后被父组件再通过自定义属性的方法完成向B组件数据传输。组件B向组件A发送数据的方法相同。主要代码如下：

//兄弟组件通过使用父组件作为中转点进行数据传输
//A组件
Vue.component("userA",{
	template:`
		<div class="userA">
			<h1>组件A</h1>
			<hr />
			<input type="text" v-model="messageA"/> <button @click="atob">发送给B</button>
			<div>收到来自B的信息：{{btoa}}</div>
		</div>
	`,
	props:["btoa"],
	data(){
		return{
			messageA:""
		}
	},
	methods:{
		atob(){
			this.$emit("custom",this.messageA)
		}
	}
})
//B组件
Vue.component("userB",{
	template:`
		<div class="userB">
			<h1>组件B</h1>
			<hr />
			<input type="text" v-model="messageB" /> <button  @click="btoa">发送给A</button>
			<div>收到来自A的信息：{{atob}}</div>
		</div>
	`,
	props:["atob"],
	data(){
		return{
			messageB:""
		}
	},
	methods:{
		btoa(){
			this.$emit("custom2",this.messageB)
		}
	}
})

let vw=new Vue({
	data:{
		messageA:"",
		messageB:""
	},
	methods:{
		fromA(messageA){
			this.messageA=messageA;
		},
		fromB(messageB){
			this.messageB=messageB;
		}
	}
}).$mount("#conver")

        二、使用中央事件总线技术

       该方法是在所有组件以外创建一个用于传递数据的中央总线(bus)。中央总线是一个没有任何选项区域和挂载点的Vue实例。其方法是通过新建的bus实例来使用emit方法发射数据，目标组件接收数据需要在mounted钩子函数内部使用bus实例的on方法完成。

        注意：发送数据和与之对应的接收数据采用的事件名必须一致。主要代码如下：

//使用中央总线技术解决兄弟组件通信问题
//中央总线vue实例
let bus=new Vue()
//A组件
Vue.component("userA",{
	template:`
		<div class="userA">
			<h1>组件A</h1>
			<hr />
			<input type="text" v-model="messageA"/> <button @click="atob">发送给B</button>
			<div>收到来自B的信息：{{btoa}}</div>
		</div>
	`,
	data(){
		return{
			messageA:"",
			btoa:""
		}
	},
	mounted(){
		bus.$on("btoa",value=>{
			this.btoa=value;
		})
	},
	methods:{
		atob(){
			bus.$emit("atob",this.messageA)
		}
	}
})
//B组件
Vue.component("userB",{
	template:`
		<div class="userB">
			<h1>组件B</h1>
			<hr />
			<input type="text" v-model="messageB" /> <button  @click="btoa">发送给A</button>
			<div>收到来自A的信息：{{atob}}</div>
		</div>
	`,
	mounted(){
		bus.$on("atob",value=>{
			this.atob=value
		})
	},
	data(){
		return{
			messageB:"",
			atob:""
		}
	},
	methods:{
		btoa(){
			bus.$emit("btoa",this.messageB)
		}
	}
})
let vw=new Vue({
}).$mount("#conver")