vue3provide一个ref值,解构后丢失响应式怎么办?

Question

const value = ref({  isGood: ref(false), info: reactive({...})  })

provide("value",value)




//
const { isGood, info} = inject("value).value
isGood没有响应式了,但是info还有,怎么改呢?

如何在Children内部拿到父级的ref? 父级是不同的组件

Answer 1

对象和数组用reactive，你怎么把引用类型放到ref里了，你用ref里结构出的就不是响应式的了

const value = inject("value");
const isGood = value.value.isGood;

或者：

import { toRefs } from 'vue';

const value = inject("value");
const { isGood, info } = toRefs(value.value);

Answer 2

provide 注入的数据就是失去响应式的，Vue 文档中有提到这部分内容 👉 #和响应式数据配合使用 - 依赖注入 | Vue.js