Vue中的父传子、子传父以及任意组件之间通信

一、父传子——利用props配置项

1. 功能：让组件接收外部传过来的数据

2. 传递数据：<label :age="18"/>

3. 接收数据：

   1. 第一种方式（只接收）：props:['age']

   2. 第二种方式（限制类型）：props:{age:Number}

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
      	age:{
          	type:Number, //类型
          	required:true, //必要性
          	default:18 //默认值
      	}
      }
      

   注意：props是只读的，Vue底层会监测props的修改，如果进行了修改，就会发出警告，若确实需要修改，那么可将props的内容到data中一份，然后再去修改data中的数据。

二、子传父（两种方法）

当父组件将数据传给子组件时，子组件通过props接受，此时数据来源自父组件，若子组件想对接收到的数据进行修改时，vue中不建议在子组件中对这些数据进行修改，这些任务应该交给父组件自己完成，此时修改数据可使用两种方法

1.父组件定义操作数据的函数，然后将该函数传给子组件，子组件通过props属性接收后，调用该函数并传参，修改数据的操作部分仍放在父组件中（该方法一般不用）

父组件

<template>
    <div>
        {{number}}
        <child :changenum="changenum"/>
    </div>
</template>

export default {
	name: 'parent',
	data() {
		return {
			number: 1,
		}
	},
	methods: {
		changenum(num) {
			this.number = this.number + num
		}
	}
}

子组件

<template>
    <div>
        <button @click="add">点我加1</button>
    </div>
</template>

export default {
	name: 'child',
	props: ['changenum'],
	methods: {
		add() {
			this.changenum(1)
		}
	}
}

2.组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 => 父组件，A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件，事件的回调在A中。

2. 绑定自定义事件：

   1. 第一种方式，在父组件中：<Child @owndefine="test"/>

   2. 第二种方式，在父组件中：

      <Child ref="xxx"/>
      ......
      mounted(){
         this.$refs.xxx.$on('owndefine',this.test)
      }
      

   3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

3. 触发自定义事件：this.$emit('owndefine',数据)

4. 解绑自定义事件this.$off('owndefine')

5. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

6. 注意：通过this.$refs.xxx.$on('owndefine',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

三、任意组件之间通信

1. 全局事件总线

2. 安装全局事件总线：

   new Vue({
   	......
   	beforeCreate() {
   		Vue.prototype.$bus = this 
   		//安装全局事件总线，$bus就是当前应用的实例对象
   	},
       ......
   }) 
   

3. 使用事件总线：

   接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

   methods(){
     demo(data){......}
   }
   ......
     mounted() {
       this.$bus.$on('xxxx',this.demo)
   }
   

   提供数据：this.$bus.$emit('xxxx',数据)

   最后最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

    beforeDestroy() {
       this.$bus.$off('xxx')
   }