«

Vue3插件中怎么使用Provide和Inject

时间:2024-7-6 09:30     作者:韩俊     分类: Javascript


为什么 Vue3 插件的工作方式与以往不同

在 Vue2 中,大多数插件将属性注入到 this 上。例如可以通过 this.$router 访问 Vue 路由器。

但是,setup() 方法不再包含对 this 的相同引用。进行这种更改的主要原因是增加了对 Typescript 的支持。

那么在 Vue3 中该如何访问我们的插件呢?可以用 provide 和 inject 来帮助我们在 Vue 程序中注入依赖项。Provide/inject 用于依赖项注入,可以使我们能在 Vue 程序的根目录中提供插件,并且然后将其注入子组件中。

在 Composition API 中,只能在 setup() 方法期间调用这两种方法。

什么是 provide 和 inject

我们需要某种键来识别依赖关系, Javascript 的 Symbol 可以复合这种要求。

然后 provide 方法会将我们的 Symbol 与某个值相关联,而 inject 方法会用相同的 Symbol 检索这个值。

下面是一个例子:

根据上述代码,在某些根组件中,我们提供了插件,并向其传递了组件函数。然后无论想在哪里使用都必须将其注入到我们的组件中。

组件永远不必真正进行 provide/inject 调用,而只需调用插件公开的 provideStore/useStore 方法即可。

还能用旧的插件吗

简单的来说是:能。如果多说点,那就是取决于你自己的想法。

可以继续使用 Options API,并且对 this 的引用方式与以前相同,并且所有旧插件的工作方式都不变。

但是迁移到 Vue3 并利用其所有功能觉得是值得的。

只要你想用 Vue2 的 Options API,你的插件就可以正常工作。但是,很多维护良好的插件或库都应该添加对 Vue3 的支持。

标签: javascript vue

热门推荐