"内心极度不渴望的东西，它不可能靠近你，心不唤物，物不至，若没有强烈的渴望，就看不到办法，成功就不会向我们靠近"
--出自《稻盛和夫给年轻人的忠告》
01
前言
Vue中的组件通讯可以是说是工作常用，面试必问的知识点了，其中包括了父子组件之间的通讯和兄弟组件之间的通讯，有的时候还会有和根组件之间的通讯。无论哪个模式的通讯，都离不开以下几点：
- 通过props和emit
- 通过provide和inject
- 通过EventBus
- 通过Vuex或者Pinia状态管理
- 通过refs
今天我们就来细说一下这几点通讯方式，让大家真正掌握在Vue中组件的通讯方式，方便大家在工作或者面试中所向无敌
02
props和emit
通过props和emit进行通讯是父子组件中最常用的通讯方式了，方便，简单，好理解。但是要注意一个地方就是：单向数据流原则不能破坏。
props和emit可以进行单独的使用，而不是一定要组件在一起使用，父组件可以通过props给子组件进行传递数据，但是子组件不是更改数把，只能进行读取，这就是单向数据流的概念。简单看一下例子，很简单不多说。
props一般用于父组件给子组件传递数据
代码语言：javascript复制// 子组件的定义
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一般用于子组件给父组件传递数据
代码语言：javascript复制// 子组件的定义
<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就可派上用场了，我们只需要在最上面的父组件中把某个数据暴露提供出去，再在子组件中注入一下就好，这样每个子组件就可以用到父组件的数据，而不用一级级的传递。
看一下官方的例子，理解一下具体的用法是怎么样的：
代码语言：javascript复制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
具体的用法还请各位小主移步到具体官网查看。无非就是
代码语言：javascript复制$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我们可以拿到组件实例进而调用方法实现某些功能。
这种方式平时大家用的也比较多，这里也不多介绍了，只需要知道这种方式也是组件间通讯方式的一种就可以啦。
