VUE3 入门教程 Vue 3.0 组合式API 提供/注入

2024-02-25 开发教程 VUE3 入门教程匿名 0℃

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

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

#设想场景

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

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  provide: {
    location: 'North Pole',
    geolocation: {
      longitude: 90,
      latitude: 135
    }
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<script>
export default {
  inject: ['location', 'geolocation']
}
</script>

#使用 Provide

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

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

property 的 name (<String>类型)
property 的 value

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

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>

#使用注入

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

inject函数有两个参数：

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

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

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

#响应性

#添加响应性

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

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

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.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 的任何更改。

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

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.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 = 'South Pole'
    }
  }
}
</script>

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

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    const updateLocation = () => {
      location.value = 'South Pole'
    }
    provide('location', location)
    provide('geolocation', geolocation)
    provide('updateLocation', updateLocation)
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    const updateUserLocation = inject('updateLocation')
    return {
      userLocation,
      userGeolocation,
      updateUserLocation
    }
  }
}
</script>

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

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>
<script>
import { provide, reactive, readonly, ref } from 'vue'
import MyMarker from './MyMarker.vue
export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    const updateLocation = () => {
      location.value = 'South Pole'
    }
    provide('location', readonly(location))
    provide('geolocation', readonly(geolocation))
    provide('updateLocation', updateLocation)
  }
}
</script>

上一节： Vue 3.0 组合式API 生命周期钩子

下一节： Vue 3.0 组合式API 模板引用

"VUE3 入门教程"的目录