Vue3的provide/inject怎么使用

本文小编为大家详细介绍“Vue3的provide/inject怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue3的provide/inject怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

成都网络公司-成都网站建设公司创新互联公司10余年经验成就非凡，专业从事网站建设、成都网站设计，成都网页设计，成都网页制作，软文营销，广告投放等。10余年来已成功提供全面的成都网站建设方案，打造行业特色的成都网站建设案例，建站热线：18980820575，我们期待您的来电！

组合式提供与注入

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

设想场景

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

</template>

import MyMarker from '../components/MyMarker'

export default {

components: {

MyMarker

provide: {

location: 'North Pole',

geolocation: {

longitude: 90,

latitude: 135

}

</script>

关于 MyMaker.vue 的代码如下：

<div>

{{location}} - {{geolocation}}

</div>

</template>

export default {

inject: ['location', 'geolocation']

}

</script>

我们可以看到效果如下：

上面我们使用的选项式的提供与注入，接下来我们就来使用组合式 API 来改造上面的代码。

组合式 provide

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

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

property 的 name (<String> 类型)

property 的 value

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

</template>

import MyMarker from '../components/MyMarker'

import {provide} from 'vue'

export default {

components: {

MyMarker

setup() {

provide('location', 'North Pole')

provide('geolocation', {

longitude: 90,

latitude: 135

})

}

</script>

我们发现就是将 provide 对象改造成 provide(key, value) 函数的形式。

组合式 inject

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

inject 函数有两个参数：

要注入的 property 的名称

一个默认的值 (可选)

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

<div>{{ location }} - {{ geolocation }}</div>

</template>

import { inject } from 'vue'

export default {

name: 'MyMarker',

setup() {

const location = inject('location')

const geolocation = inject('geolocation')

return {

location,

geolocation

}

</script>

我们再次看看效果如下：

响应式

添加响应式

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

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

</template>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive} from 'vue'

export default {

components: {

MyMarker

setup() {

const location = ref('North Pole')

const geolocation = reactive({

longitude: 90,

latitude: 135

})

provide('location', location)

provide('geolocation', geolocation)

}

</script>

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

修改响应式 property

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

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

</template>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive} from 'vue'

export default {

components: {

MyMarker

setup() {

const location = ref('North Pole')

const geolocation = reactive({

longitude: 90,

latitude: 135

})

provide('location', location)

provide('geolocation', geolocation)

return {

location

}

methods: {

updateLocation() {

this.location = "hahaha"

}

</script>

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

</template>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive} from 'vue'

export default {

components: {

MyMarker

setup() {

const location = ref('North Pole')

const geolocation = reactive({

longitude: 90,

latitude: 135

})

const updateLocation = () => {

location.value = "hahaha"

}

provide('location', location)

provide('geolocation', geolocation)

provide('updateLocation', updateLocation)

}

</script>

<div>{{ location }} - {{ geolocation }}</div>

</template>

import { inject } from 'vue'

export default {

name: 'MyMarker',

setup() {

const location = inject('location')

const geolocation = inject('geolocation')

const updateLocation = inject('updateLocation')

return {

location,

geolocation,

updateLocation

}

</script>

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

</template>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive, readonly} from 'vue'

export default {

components: {

MyMarker

setup() {

const location = ref('North Pole')

const geolocation = reactive({

longitude: 90,

latitude: 135

})

const updateLocation = () => {

location.value = "hahaha"

}

provide('location', readonly(location))

provide('geolocation', readonly(geolocation))

provide('updateLocation', updateLocation)

}

</script>

读到这里，这篇“Vue3的provide/inject怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

网页题目：Vue3的provide/inject怎么使用
标题来源：https://www.cdcxhl.com/article12/ijjggc.html

成都网站建设公司_创新互联，为您提供企业网站制作、App开发、移动网站建设、商城网站、品牌网站设计、网站内链

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

猜你还喜欢下面的内容