Vue3之组件通信

通常在项目中，页面都是由很多个组件组成的，那么组件之间的通信（传值）我们该如何处理呢，我们通常采用如下方案处理：

父传子-Props

小细节：虽然理论上你也可以在向子组件传递 props 时使用驼峰形式（使用dom模板时例外），但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式

// 父组件

// MyComponent.vue

要记住，Props是单向数据流，切不可以直接改变它，如果我们需要对Props的值进行修改，可以尝试以下操作：

• 通过ref

const props = defineProps(['initialCounter'])

// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)

• 通过computed

const props = defineProps(['size'])
// 该 prop 变更时计算属性也会自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())

子传父-emit

// 子组件MyButton.vue

嵌套组件-provide&inject

兄弟组件-mitt

在vue2中我们可以通过new一个Vue的实例来充当bus总线，vue3中变成了mitt,不过我们需要npm install mitt ---save。

// utils.js
import mitt from "mitt";
const bus = mitt();
export default bus