8、组件之间的通讯

一、父子组件传参数：

1-1：父传子

父组件通过 v-bind：传参数

 <test :message='count'></test>
 

子组件通过props接收参数：

 props:['message']

1-2、子传父：通过自定义事件$emit

父组件通过自定义事件
<test :message='count' @add2='getEventTarget'></test>
 getEventTarget(event) {console.log(event)}
 子组件：
 <button @click="add2">把事件对象传给父组件</button>
 add2(e){this.$emit('add2',e)}

1-3：通过自定义组件v-model

//子组件
<template>
	<div>
		<input  @input="$emit('input:text',$event.target.value)" :value="userName" />
		<!-- <input  @input="$emit('input',$event.target.value)" :value="value" /> -->
	</div>
</template>

<script>
	export default{
		model:{
			prop:'userName',
			event:'input:text'
		},
		props:['userName']
		// props:['value']
	}
</script>
//父组件
<vmodel v-model='userName'></vmodel>

1、一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

2、单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的 model 选项可以用来避免这样的冲突

二、兄弟组件传参数：

1、创建EventBus

import  vue from "vue"
export default new vue()

2、在页面引入eventBus,注册$on事件监听

import eventBus from "./eventBus.js"
created() {
	eventBus.$on('add2',function(){
		console.log(arguments);
	})
}

3、在页面引入eventBus,广播$emit事件

import eventBus from "./eventBus.js"
eventBus.$emit('add2', e, 4, 5, 6)