Vue中的组件通信

一、组件通信

可分为父传子、子传父、兄弟组件之间的通信
单向数据流动，通过父组件传入子组件的数据，如果在子组件修改无法在父组件中使用

1. 父传子

父组件给子组件传值，可以在父组件的子标签中添加自定义属性名 绑定需要传递的参数，最后在子组件中通过props来接收这个参数props的用法有三种

//第一种
props:['call']

//第二种
props:{
	call:String //可以指定类型，如数组、字符串···
}

//第三种
props:{
	call:{
		type:String,  	//类型
		default:'Baby' //默认的值
	}
}

2. 子传父

通过$emit触发父级方法，传递参数

//在子组件通过$emit
<input type="text" :value="title">
<button @click="chage">添加</button>

	chage () {
      this.$emit('add', this.title);

}

在父组件中在子组件上 使用 @方法名 来监听事件

//在父组件
<Input @add="addHandler " />
	addHandler (title) {
    	console.log(title); // 子组件传递的值
}

3. 兄弟之间—> [使用EventBus 兄弟组件通信]

• 使用event.$on监听自定义事件
• evevt.$emit触发
• event.$off解除绑定

在event.js引入

import Vue from 'vue';
 
export default new Vue();

兄弟1-传值方

import event from '../../utils/event.js'
 
// 兄弟组件通信，触发自定义事件
event.$emit('logTitle', this.title);

兄弟2-接收值方

import event from '../../utils/event.js'
 
// 绑定自定义事件
event.$on('logTitle', this.consoleTitle);
...
consoleTitle(title) {
      console.log('兄弟组件间通信', title);
}
...
 
beforeDestroy() {
      // 注意销毁周期解绑自定义事件
      event.$off('logTitle', this.consoleTitle);
}