vue3通过provide与inject我们可以把父组件数据传递N个层级的子组件

vue3 provide 与 inject

我们通过props属性可以把数据传给组件,而通过provide与inject我们可以把数据传递给N个层级的子组件,比如A组件用了B组件,B组件用了C组件,它可以把组件直接从A传给C组件,vue2使用computed来实现响应式,而vue3中 provide 使用ref或reactive定义的变量即可实现响应式。

A组件传入值,传入了userInfo对象,不用管传给谁了谁,谁都可以去接收key为provideCount的数据

A组件名称 app.vue


 

B组件调用C组件,但是我啥也没干

B组件名称 provideB.vue




C组件获取A组件传入的值,我修改了userInfo的值,A组件也会跟着变哦。

C组件名称 provideCSetup.vue





你可能感兴趣的:(vue3,provide,inject,数据传递,父子组件传值,组件通信,传递N个层级,computed)