本想简单写写，没想到说清楚已经变成了一篇很长的帖子，欢迎当笔记搜藏起来。
props / emits 父子组件通信
props一般负责向子组件传递数据
下面是一个简单的例子，父组件向子组件传递了一个title，子组件负责显示title。
// child-component.vue
<template>
<h2>{{ title }}</h2>
</template>
<script>
export default {
name: "child-component",
props: ['title'] //可以注册多个prop
}
</script>
// 父组件中，使用子组件
<ChildComponent :title="'这是传递的Title'"></ChildComponent>
emits主要用于监听子组件事件
开发过程中子组件可能需要与父级组件进行沟通，这时我们就需要用到emits。下面是一个简单的例子，点击子组件按钮时，改变了父组件显示的信息。
// child-component.vue
<button @click="$emit('textChange', '子组件被点击了')">点我</button>
// 父组件中，使用子组件
<template>
<div>
<div>{{ msg }}</div>
<ChildComponent @textChange="msg = $event"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from "./child-component"
export default {
components: {
ChildComponent
},
data() {
return {
msg: 'test msg!'
}
}
}
</script>
prop 类型、验证以及默认值
这三块内容在官网篇幅还挺长的，感觉上重点却不多，我们上面注册props的时候使用的数组，如：["title"]，其实实际开发过程中，为了传值的清晰，我们用的都是对象，此外我们会指定其类型，验证规则，以及给出默认值，三者都是可选的，看下面的例子：
export default {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
default() {
return 'Default function'
}
}
}
}
注意：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
但是，如果prop传递的是一个对象或者数组，我们是可以改变其内部的数据的，同时这个改变会变更对象或数组本身，从而影响到其所在父组件的状态。
vue3的新选项emits
vue 3 提供了一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。emits 选项中列出的事件不会从组件的根元素继承，也将从$attrs property中移除。
emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象，后者允许配置事件验证（因为返回false也依旧会继续调用事件，所以作者本人没理解验证这块，有知道的小伙伴欢迎留言）。使用如下：
emits: {
// 没有验证函数
click: null,
// 带有验证函数
submit: payload => {
if (payload.email && payload.password) {
return true
} else {
return false // 返回false事件依旧会继续被调用
}
}
}
因为不声明emits也可以使$emit来调用传递的事件，所以看似用处不大，但声明首先可以使代码清晰，可以一眼看到向其父组件透传的事件。同时需要向其父组件透传原生事件（如：@ckick）的组件来说，不声明会导致事件被触发两次，而声明可以避免这类问题。
provide / inject 多层嵌套组件通信
使用场景：
1、多层嵌套组件传值
2、父子组件相互寻找比较麻烦，如slot
简单示例：
// 父组件 提供对象
provide: {
user: 'John Doe'
}
// 子组件，接收对象
inject: ['user'],
created() {
console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
}
访问组件实例 property（用this），我们需要将 provide 转换为返回对象的函数
// 父组件
data() {
return {
userName: 'test name',
}
},
provide() {
return {
user: this.userName
}
}
响应性注意这里传递的是值，并不是响应式的，官网建议分配一个组合式 API computed property：
// 来自官网的建议
todoLength: Vue.computed(() => this.todos.length)
个人建议直接传递一个对象过去，利用指针传递来实现响应式。（简单粗暴）如果非要了解可以关注后续再写文章中关于 reactive provide/inject 的信息
$attrs / $parent / $refs 能抓到猫就是好老鼠系列
$attrs 包含了父作用域中不作为组件 props 或 emits 的 attribute 绑定和事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用。
示例：
// 父组件中
<ChildComponent title="123" titleProp="456"></ChildComponent>
// 子组件中
props: ['titleProp'],
created() {
console.log(this.$attrs.title); // 123
console.log(this.$attrs.titleProp); // undefined
console.log(this.title); // undefined
console.log(this.titleProp); // 123
}
$parent 这是父实例，如果当前实例有的话。简单粗暴拿着实例各种用。
$refs 一个对象，持有注册过ref的所有 DOM 元素和组件实例。父组件使用其可以轻易的获取子组件，并各种使用。
eventBus 事件总线vue3不支持了
在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。
如果非得要用，可以使用一些外部第三方库，例如 mitt 或 tiny-emitter
// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),
}
vuex 和 自定义共享对象
vuex 轻松获取响应式的全局数据。
业务独立的组件通信更推荐的做法是自定义一个js对象，用js对象来保存共享数据和函数。export是一个对象的话，import之后访问的是同一个对象，其可以方便的提供数据共享和函数调用。此外，如果想要不同的对象可以export一个工厂函数。
总结
- props / emits 应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
- provide / inject 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
- provide / inject 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”，即 prop 需要通过许多层级的组件传递下去，但这些组件本身可能并不需要那些 prop。
- prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop，那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容，因此 prop 可以被直接传递而不需要中间组件的参与。
- 全局状态管理，比如 Vuex
