vue3-provide和inject 通讯

 

链接： http://ggz.longpanda.top/article_detail?id=24

 

基本语法

 

父组件声明

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

setup() {

    const geolocation = reactive({       longitude: 90,       latitude: 135     })

    provide('geolocation', geolocation)     return {       geolocation     }   },

 

 

子、孙组件使用

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

setup() {     const userGeolocation = inject('geolocation')     return {       userLocation,       userGeolocation     }   } }

 

 

子级修改inject

场景：有时我们需要在子组件内部更新 inject 的数据。在这种情况下，我们建议 provide 一个方法来负责改变响应式

 

父组件：

setup() {     const location = ref('North Pole')

    const updateLocation = () => {       location.value = 'South Pole'     }

    provide('location', location)

    provide('updateLocation', updateLocation)   }

 

子组件：

setup() {     const userLocation = inject('location', 'The Universe')     const userGeolocation = inject('geolocation')     const updateUserLocation = inject('updateLocation')     return {       userLocation,       userGeolocation,       updateUserLocation     }   }

 

禁止子级修改inject

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

 

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

setup() {     const location = ref('North Pole')     provide('location', readonly(location))   }