vue 组件通信将父组件中的a传递到了子组件中。这时需要子组件接受传递给它的数据，如下：在props属性里，对应写上

父组件与子组件通信

html:

<template id="child">
	<div>
		<h3>我是子组件</h3>
	</div>
</template>	
<div id="box">
	<child-com></child-com>
</div>

js：

window.onload = function() {
	new Vue({
		el: '#box',
		data:{
			a: '我是父组件的数据'
		},
		components: {
			'child-com': {
				template: '#child'
			}
		}
	})
}

如果child-com这个子组件想要拿到父组件的数据，怎么办？答案： props

在父组件中使用子组件时，传递参数，如下：

<div id='#box'>
	<child-com :msg = "a"></child-com>
</div>

将父组件中的a传递到了子组件中。这时需要子组件接受传递给它的数据，如下：

	new Vue({
		el: '#box',
		data:{
			a: '我是父组件的数据'
		},
		components: {
			'child-com': {
				props: ['msg'],//这里接受，
				template: '#child'
			}
		}
	})

在props属性里，对应写上需要接受的值的属性名。就可以在子组建中使用msg这个值了。比如：

<template id="child">
	<div>
		<h3>我是子组件</h3>
		<p>{{msg}}</p>
	</div>
</template>

注意：在数据传递过程中，数据只能单向传递。当我们改变了props中对应属性的值时，父组件是不会改变的。但是有时候我们就需要把父组件的值一起改变怎么办？？

第一种方法：.sync修饰符

<child-com :msg.sync = "a"></child-com><!--在msg后面跟上.sync。当子组件中改变传入的值时，父组件就会改变-->

第二种方法：在父组件中，把要传递给子组件的的数据，放入一个对象中。然后直接把整个对象传递到子组件中。由于对象是应用类型。所以在子组件中可以通过地址直接找到变量，并对其修改。

第三种方法：通过$emit发送一个自定义事件，到父组件去。

this.$emit('message', { message: this.message })
<!--在父组件中，使用$on监听-->
<child-com v-on:message="handleMessage"></child-com>
<!--监听到自定义事件后，得到传递来的数据，进行操作-->

以上的通信方式，适用于组件是父子关系。父传子： 1. props 子传父： 1. 使用对象引用 2. 使用自定义事件的方式

多个兄弟组件通信—— 单一事件管理组件通信

代码如下，有三个兄弟组件 com-a, com-b, com-c。他们的关系是兄弟关系。 html:

<div id = "box">
	<com-a> </com-a>
	<com-b> </com-b>
	<com-c> </com-c>
</div>

js:

var Event = new Vue();//全局的，每一个组件都要访问到的。用于管理组件通信用的
var A = {
	template: `
		<div>
			<h3>我是A组件</h3>
			<input type="button" value="把A数据给c" @click="send">
		</div>`，
	methods: {
		send() {
			Event.$emit('a-msg', this.a)
		}
	},	
	data(){
		return {
			a: "我是a数据"
		}
	}	
}

var B = {
	template: `
		<div>
			<h3>我是B组件</h3>
			<input type="button" value="把B数据给c" @click = "send">
		</div>`,
	methods: {
		send() {
			Event.$emit("b-msg", this.b)
		}
	},	
	data(){
		return {
			b: "我是b数据"
		}
	}	
}
var C = {
	template: `
		<div>
			<h3>我是C组件</h3>
			<span>接受A的数据：{{Event.}}</span>
		</div>`,
	mounted(){
		var _this = this
		Event.$on('a-msg', function(a) {
			_this.a = a
		})
		Event.$on('b-msg', function(b) {
			_this.b = b
		})
	},
	data(){
		return {
			a: '',
			b: ''
		}
	}
}

window.onload = function() {
	new Vue({
		el: '#box',
		components: {
			'com-a': A,
			'com-b': B,
			'com-c': C
		}
	})
}

如何实现上面组件中a, b 传递给c数据呢？难道都给他们一个父组件，然后通过父组件来接受和传递？？？

单一事件管理组件通信

在js代码中尊准备一个空的全局实例对象

var Event = new Vue();//全局的，每一个组件都要访问
Event.$emit(事件名称， 数据)//每个组件需要传递数据给其他组件时，使用该方法发送事件。
Event.$on(事件名称， function(数据) {//在任意个想要获取数据的组件中使用该方法得到数据
	//处理
}.bind(this))

vue 组件通信

父组件与子组件通信

多个兄弟组件通信—— 单一事件管理组件通信

结尾