526互联

vue3 中 props 传递响应式值不会变

发布时间 2023-08-15 15:22:35作者: 蓓蕾心晴

vue3 中 通过 props 传递响应式值不会跟着响应式，原因为获取 props 的时候 直接通过 props.xxx 来获取了，如果要保持响应式，需要手动转为响应式

const { status } = toRefs(props)

// or

const status = toRef(props, 'status')

当组件层级比较深的时候，为避免 props 多级传递，可以使用 provide, inject，注意，如果要保证传递的数据为响应式，要直接传响应式数据，而不是最终获取的值

// 父组件
const status = ref(0)
provide('status', status)

// 子组件
const status = inject('status')