组件中的通讯
组件是vue.js强大的功能，好的组件封装可以使代码的复用性更强大，而组件实例的作用域是相互独立的，这就意味着不同组件之间数据无法相互引用。
组件的传递数据方向不同来区分为，父传子和子传父。
父传子
基本思想
- 父组件中给子组件绑定属性
- 子组件内部通过props选项接收数据
使用defineProps，可直接使用，无需引用
子传父
基本思想
- 父组件中给子组件标签通过@绑定事件
- 子组件内部通过 emit 方法触发事件
- const emit = defineEmits(['事件名1', '事件名2'])
- emit('事件名1', 值1)
使用defineEmits，可直接使用，无需引用
provide和inject
provide和inject组件传值，一般用在隔代传值，比如祖父组件传值给孙子组件。适用场景如图
跨层传递普通数据
实现步骤
- 顶层组件通过
provide函数提供数据 - 底层组件通过
inject函数提供数据
跨层传递响应式数据
在调用provide函数时，第二个参数设置为ref对象
跨层传递方法
顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据
provide和inject总结
provide 和 inject的作用主要是跨层组件通讯。
底层组件想要修改顶层组件的数据，从顶层组件传递方法，在底层组件调用方法
