最全Vue3中组件的通讯方式都整理好了，面试不怕，工作不怕，建议收藏

"内心极度不渴望的东西，它不可能靠近你，心不唤物，物不至，若没有强烈的渴望，就看不到办法，成功就不会向我们靠近"

--出自《稻盛和夫给年轻人的忠告》

01

前言

Vue中的组件通讯可以是说是工作常用，面试必问的知识点了，其中包括了父子组件之间的通讯和兄弟组件之间的通讯，有的时候还会有和根组件之间的通讯。无论哪个模式的通讯，都离不开以下几点：

1. 通过props和emit
2. 通过provide和inject
3. 通过EventBus
4. 通过Vuex或者Pinia状态管理
5. 通过refs

今天我们就来细说一下这几点通讯方式，让大家真正掌握在Vue中组件的通讯方式，方便大家在工作或者面试中所向无敌

02

props和emit

通过props和emit进行通讯是父子组件中最常用的通讯方式了，方便，简单，好理解。但是要注意一个地方就是：单向数据流原则不能破坏。

props和emit可以进行单独的使用，而不是一定要组件在一起使用，父组件可以通过props给子组件进行传递数据，但是子组件不是更改数把，只能进行读取，这就是单向数据流的概念。简单看一下例子，很简单不多说。

props一般用于父组件给子组件传递数据

// 子组件的定义
export default {
  // 接收传递数据
  props: {
    name: {
      type: Array,
      default: () => ({})
    }
  },
  mounted() {
    console.log(this.name) // parent name
  },
}
// 父组件的定义
<template>
<div>
<Child :name="name"></Child>
<div>
</template>
<script>
export default {
  data() {
    return {
      name: 'parent name'
    }
  }
}
</script>

emit一般用于子组件给父组件传递数据

// 子组件的定义
<template>
<div>
<button @click="changName">改名字</button>
<div>
</template>
<script>
export default {
  // 接收传递数据
  props: {
    name: {
      type: Array,
      default: () => ({})
    }
  },
  mounted() {
    console.log(this.name) // parent name
  },
  methods: {
    changeName() {
      this.$emit('changeName', 'child changed name')
    }
  }
}
</script>
// 父组件的定义
<template>
<div>
<Child :name="name" @changeName="onChangeName"></Child>
<div>
</template>
<script>
export default {
  data() {
    return {
      name: 'parent name'
    }
  },
  methods: {
    onChangeName(newName) {
      this.name = newName
    }
  }
}
</script>

props 和 emit 总起来说比较简单，大家简单看一下就好，注意在Vue3中setup的使用方式有些区别，注意一下

03

provide和inject

provide和inject相信大家应该用的比较少，还不如其它方式用的比较多。

这种方式主要是解决：

"当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。"

试想一下这个场景：某个组件下面有10个子组件，这10个组件下面又可能每个组件有10个子组件，以次类推。如果这些子组件都需要依赖最上面父组件的某个数据，通过props一级级的传递也可以实现，但是这样做太麻烦，也没有人会这样用所以provide和inject就可派上用场了，我们只需要在最上面的父组件中把某个数据暴露提供出去，再在子组件中注入一下就好，这样每个子组件就可以用到父组件的数据，而不用一级级的传递。

看一下官方的例子，理解一下具体的用法是怎么样的：

app.component('todo-list', {
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})
app.component('todo-list-statistics', {
  inject: ['todoLength'],
  created() {
    console.log(`Injected property: ${this.todoLength.value}`) // > 注入的 property: 5
  }
})

04

EventBus

相信大家都应该用过这种方式，在Vue最早的时候用的是: new Vue() 来充当消息总线。现在应该没有这么用的了，这里给大家介绍两个比较好用的第三方插件库吧：

1. tiny-emitter

2. pubsub

具体的用法还请各位小主移步到具体官网查看。无非就是

$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),

这几个API的使用方式

05

Vuex或者Pinia状态管理

状态管理大家应该都很熟悉，之前用的比较多的是Vuex，把整个系统的状态管理都集中管理起来，由单一的获取入口和操作入口，一个地方更改，其它的依赖都会做出响应改变。

关于Vuex的用法个人觉得不是很好用，理解起来也比较费劲，尤其是在有 module 的情况下，层层嵌套很是不优雅，这里推荐大家使用一个新的状态管理工具Pinia，同一团队打造，简单的api使用起来更加顺手。

06

refs

如果我们想要获取子组件的实例，并且调用其中的方法，就可以用到refs了，通过refs我们可以拿到组件实例进而调用方法实现某些功能。

这种方式平时大家用的也比较多，这里也不多介绍了，只需要知道这种方式也是组件间通讯方式的一种就可以啦。