#响应性
#添加响应性为了增加提供值和注入值之间的响应性，我们可以在提供值时使用 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>
页:
[1]