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

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')

 

posted @ 2023-08-15 15:17  蓓蕾心晴  阅读(2169)  评论(0编辑  收藏  举报