提供/注入

    我们也可以在 Composition API 中使用 。两者都只能在当前活动实例的 期间调用。

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

    1. <!-- src/components/MyMarker.vue -->
    2. <script>
    3. export default {
    4.   inject: ['location', 'geolocation']
    5. }
    6. </script>

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

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

    1. property 的 name (<String> 类型)
    2. property 的 value
    1. <!-- src/components/MyMap.vue -->
    2. <template>
    3.   <MyMarker />
    4. </template>
    6. <script>
    7. import { provide } from 'vue'
    8. import MyMarker from './MyMarker.vue
    10. export default {
    11.   components: {
    12.     MyMarker
    13.   },
    14.   setup() {
    15.     provide('location', 'North Pole')
    16.     provide('geolocation', {
    17.       longitude: 90,
    18.       latitude: 135
    19.     })
    20.   }
    21. }
    22. </script>

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

    inject 函数有两个参数：

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

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

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

    1. <!-- src/components/MyMap.vue -->
    2. <template>
    3.   <MyMarker />
    4. </template>
    6. <script>
    7. import { provide, reactive, ref } from 'vue'
    10.   components: {
    11.     MyMarker
    12.   },
    13.   setup() {
    14.     const location = ref('North Pole')
    15.     const geolocation = reactive({
    16.       longitude: 90,
    17.       latitude: 135
    18.     })
    20.     provide('location', location)
    21.     provide('geolocation', geolocation)
    22.   }
    23. }
    24. </script>

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

    修改响应式 property

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

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

    1. <!-- src/components/MyMap.vue -->
    2. <template>
    3.   <MyMarker />
    4. </template>
    6. <script>
    7. import { provide, reactive, ref } from 'vue'
    8. import MyMarker from './MyMarker.vue
    10. export default {
    11.   components: {
    12.     MyMarker
    13.   },
    14.   setup() {
    15.     const location = ref('North Pole')
    16.     const geolocation = reactive({
    17.       longitude: 90,
    18.       latitude: 135
    19.     })
    21.     provide('location', location)
    22.     provide('geolocation', geolocation)
    24.     return {
    25.       location
    26.     }
    27.   },
    28.   methods: {
    29.     updateLocation() {
    30.       this.location = 'South Pole'
    31.     }
    32.   }
    33. </script>

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

    1. <!-- src/components/MyMarker.vue -->
    2. <script>
    3. import { inject } from 'vue'
    5. export default {
    6.   setup() {
    7.     const userLocation = inject('location', 'The Universe')
    8.     const userGeolocation = inject('geolocation')
    9.     const updateUserLocation = inject('updateLocation')
    11.     return {
    12.       userLocation,
    13.       userGeolocation,
    14.       updateUserLocation
    15.     }
    16.   }
    17. }
    18. </script>
    1. <!-- src/components/MyMap.vue -->
    2. <template>
    3.   <MyMarker />
    4. </template>
    6. <script>
    7. import { provide, reactive, readonly, ref } from 'vue'
    8. import MyMarker from './MyMarker.vue
    10. export default {
    11.   components: {
    12.     MyMarker
    13.   },
    14.   setup() {
    15.     const location = ref('North Pole')
    16.     const geolocation = reactive({
    17.       longitude: 90,
    18.       latitude: 135
    19.     })
    21.     const updateLocation = () => {
    22.       location.value = 'South Pole'
    23.     }
    25.     provide('location', readonly(location))
    26.     provide('geolocation', readonly(geolocation))
    27.     provide('updateLocation', updateLocation)
    28.   }
    29. </script>