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

2023-08-16 08:52:32 浏览数 (1)

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

代码语言:javascript复制
const { status } = toRefs(props)

// or

const status = toRef(props, 'status')

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

代码语言:javascript复制
// 父组件
const status = ref(0)
provide('status', status)

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

0 人点赞