创新互联VUE3教程：Vue3.0组合式API提供/注入

本指南假定你已经阅读了 Provide / Inject、组合式 API 介绍和响应性基础。如果你不熟悉组合式 API，请先阅读这篇文章。

创新互联是一家专业从事网站建设、网络营销、微信平台小程序开发、网站运营为一体的建站企业；在网站建设告别千篇一律，告别似曾相识，这一次我们重新定义网站建设，让您的网站别具一格。响应式网站，实现全网营销！一站适应多终端，一样的建站，不一样的体验！

我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup() 期间调用。

#设想场景

假设我们要重写以下代码，其中包含一个 MyMap 组件，该组件使用组合式 API 为 MyMarker 组件提供用户的位置。

#使用 Provide

在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。

provide 函数允许你通过两个参数定义 property：

1. property 的 name ( 类型)
2. property 的 value

使用 MyMap 组件，我们提供的值可以按如下方式重构：

#使用注入

在 setup() 中使用 inject 时，还需要从 vue 显式导入它。一旦我们这样做了，我们就可以调用它来定义如何将它暴露给我们的组件。

inject 函数有两个参数：

1. 要注入的 property 的名称
2. 一个默认的值 (可选)

使用 MyMarker 组件，可以使用以下代码对其进行重构：

#响应性

#添加响应性

为了增加提供值和注入值之间的响应性，我们可以在提供值时使用 ref 或 reactive。

使用 MyMap 组件，我们的代码可以更新如下：

现在，如果这两个 property 中有任何更改，MyMarker 组件也将自动更新！

#修改响应式 property

当使用响应式提供/注入值时，建议尽可能，在*提供者*内保持响应式 property 的任何更改。

例如，在需要更改用户位置的情况下，我们最好在 MyMap 组件中执行此操作。

然而，有时我们需要在注入数据的组件内部更新注入的数据。在这种情况下，我们建议提供一个方法来负责改变响应式 property。

最后，如果要确保通过 provide 传递的数据不会被注入的组件更改，我们建议对提供者的 property 使用 readonly。

分享名称：创新互联VUE3教程：Vue3.0组合式API提供/注入
文章网址：http://www.shufengxianlan.com/qtweb/news15/72715.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联