vue2中我们已经使用过provideinject来实现祖孙组件之间的数据传递,但是在vue3中由于我们使用setup,此时我们应该如何去使用provideinject函数呢?
在vue中帮我们提供了provideinject的函数,我们可以直接在setup函数中使用即可。
一、provide和inject的基本使用
在这里插入图片描述
如上图所示,此时我们将一个普通对象进行传递,然后在Home组件中通过inject函数来接收。
我们也可以通过refreactive进行传递。
在这里插入图片描述
在这里插入图片描述
上面代码我们可以看出在Home.vue文件中可以更改App.vue通过provide传递过去的数据,但是在一些情况下,我们是不允许的,此时我们可以采用readonly来进行设置。
在这里插入图片描述
如果我们确实希望改变父组件的数据,此时我们可以在父组件中设置方法,通过provide将该方法传递给子组件,保证数据是数据提供的位置进行修改。
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐