Vue3 Provide / Inject传值

父组件

<template>
  
    <button @click="change">改变地址</button>
    <div>{{ location }}</div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted, provide, reactive } from 'vue'
//普通传递，没有响应式
provide('names', "张三")
//响应式
const location = ref('苏州')
const geolocation = reactive({
    longitude: 90,
    latitude: 135
})
provide('address', geolocation)
provide('location', location) //这里是location不是location.value

const change = () => {
    location.value = '上海'
}
</script>

子组件

<template>
    <h1>混入</h1>
    <div>{{ location }}</div>
</template>

<script setup>
import { inject } from 'vue';
const names = inject('names')
const address = inject('address')
const location = inject('location')
</script>

当父组件改变值的时候子组件也会跟随改变