Vue3中依赖注入provide、inject使用方法

 Vue3中依赖注入provide、inject使用方法 

目录

一、Prop 逐级透传问题

二、Provide (提供)

三、应用层 Provide

四、Inject (注入)

五、注入默认值


一、Prop 逐级透传问题


vue中我们要从父组件向子组件传递数据时,会使用 props。
如果需要给深层子组件传递数据,会非常麻烦,如下图:

Vue3中依赖注入provide、inject使用方法_第1张图片

provide 和 inject 可以帮助我们解决这一问题。

一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

Vue3中依赖注入provide、inject使用方法_第2张图片

二、Provide (提供)


要为组件后代提供数据,需要使用到 provide() 函数:

Vue3中依赖注入provide、inject使用方法_第3张图片

如果不使用

你可能感兴趣的:(Vue.js,vue.js,前端,javascript)