vue3 之 组合式API—provide和inject

作用

顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

场景

room-page为顶层组件
room-msg-comment为底层组件
vue3 之 组合式API—provide和inject_第1张图片

跨层传递普通数据

1.顶层组件通过provide函数提供数据
2.底层组件通过inject函数获取数据
vue3 之 组合式API—provide和inject_第2张图片
vue3 之 组合式API—provide和inject_第3张图片

跨层传递响应式数据

在调provide函数时,第二个参数设置为ref对象
vue3 之 组合式API—provide和inject_第4张图片
vue3 之 组合式API—provide和inject_第5张图片

跨层传递方法

顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件中的数据
vue3 之 组合式API—provide和inject_第6张图片
vue3 之 组合式API—provide和inject_第7张图片

需求解决

vue3 之 组合式API—provide和inject_第8张图片

总结

1.provide和inject的作用是什么?
跨层组件通信

2.如何在传递的过程中保持数据响应式?
第二个参数传递ref对象

3.底层组件想要通知顶层组件做修改,如何做?
传递方法,底层组件调用方法

4.一棵组件树中只有一个顶层和底层组件吗?
相对概念,存在多个顶层和底层的关系
只要在组件树中能形成顶层和底层的组件关系都可以使用provide和inject

你可能感兴趣的:(vue3,vue,vue.js,javascript,vue3)