vue组件之间传递数据（父传子，子传父，兄弟相传）

父组件给子组件传递数据

一、v-bind & props

// father.vue
<template>
	<child :count="count" /> // 子组件
</template>

<script>
	export default {
		data() {
			return {
				count: 0	
			}
		}	
	}
</script>


// child.vue
<template>
	<h1>我是childOne组件</h1>
	<p>我从父组件接受的参数count= {{count}}</p>
</template>

<script>
	export default {
		props: {
			count: {
				type: Number,
				default: 0	
			}	
		}
	}
</script>

二、provide & inject

这种方式传递参数可以渗透到其子孙后台所有的组件。

// father.vue
export default {
	provide() {
		return {
			count: () => this.count	 // 这样写以达到响应式效果
		}
	}
}

// child.vue
export default {
	inject: ['count'] // 这里要注意这里接受的是一个方法。需要count()这样使用
}

子组件给父组件传递数据

$emit与自定义事件

// child.vue
<script>
	...
	mounted() {
		this.$emit('nameFn',{name: 'child'});
	},
	...
</script>

// father.vue
<template>
	<child @nameFn="nameFn" />
</template>

<script>
	...
	methods: {
		nameFn(data) {
			console.log(data)
		}	
	}
	...
</script>

兄弟组件之间传递数据

一、父组件作为中间件

该方式不实用，且写出来的代码不宜维护。这里不举例。

二、eventBus

使用这种方式有的人可能遇到了mounted中传递数据，并没有被接收到的问题。这个因为传递了数据后，接收方还没有被实例化。解决的方法：
一、将接收方（on ）的组件放在传递方（emit）的组件的前面，让接收方先实例化。
二、将emit进行异步处理，setTimeout()。

// eventBus.js
import Vue from 'vue';

export default new Vue();

// borderOne.vue
<script>
	import eventBus from '@/eventBus.js';
	export default {
		...
		mounted() {
			setTimeout(() => {
				eventBus.$emit('nameFn', {name: '大哥'})	
			}, 0)
		},
		...
	}
</script>

// borderTwo.vue
<script>
	import eventBus from '@/eventBus.js';
	export default {
		...
		mounted() {
			eventBus.$on('nameFn', data => {
				console.log(data);
			})
		},
		...
	}
</script>