Vue组件间通信方式总结

父子组件通信方式

父 => 子（props）

• 在父组件中的子组件中，把相应的数据携带上
• 子组件中通过props:[‘’]进行接收
• 注意点： props只可以从上一级组件传递到下一级组件(父子组件)，即所谓的单向数据流。而且props是只读的，不可被修改，所有的修改都会失效并警告

子 => 父（$emit）

• 对于$emit 的理解: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。
• 在子组件中

this.$emit('事件名', args)

• 在父组件中的子组件中，直接通过@事件名进行接受，并且在vue实例中对事件方法进行相关操作

<template>
	<子组件 @事件名 = "事件名">
<template>

(父子组件间数据互通)$children / $parent

• 在父子组件之间创建父子关系；子实例可以用this.$parent访问父实例，子实例被推入父实例的$chileren数组中
• 其实就是通过$parent和$children就可以访问组件的实例；拿到实例代表什么呢？代表可以访问此组件的所有方法和data，
• 如何实现拿到指定组件的实例呢？
• 获取到子组件A

// 在父组件中获取到子组件中的数据
this.$children[0].messageA = ''
// 在子组件中也可以直接获取到父组件中的相关数据
return this.$parent.msg

• 注意点：要注意边界情况，如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样，$children 的值是数组，而$parent是个对象

provide/inject（Vue3）

• 简单来说就是父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量
• 适用：父组件 => 后代组件(子 ｜孙)
• 使用情况

// 父组件中
provide:{
	for: 'demo'
}
// 后代组件中
inject: ['for']

ref / refs

• ref: 如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据
• 看一个ref来访问组件的例子

// 父组件中
<子组件 ref'="comA" />
// 父组件中
export default {
	// 钩子中
	mounted() {
		// 获取子组件实例
		const comA = this.$refs.comA
		// 调用子组件中的方法
		comA.sayHello()
	}

eventBus（全局事件总线）

• 其作为沟通桥梁的概念
• 就像是所有组件共用事件中心，可以向该中心注册发送事件或接收事件，所有组件都可以通知其他组件
• 缺点：项目较大时，容易造成难以维护的灾难
• 使用（以兄弟组件通信为例）

// 兄组件中 ～ 发送事件
methods:{
   additionHandle(){
     EventBus.$emit('addition', {
       num:this.num++
     })
   }
 }
// 弟组件中 ～ 接收事件
mounted() {
   EventBus.$on('addition', param => {
     this.count = this.count + param.num;
   })
 }
 // 移除事件监听
import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

Vuex

$attrs 与 $listeners

参考

参考文章