Vue3 通过 props 传值被消除响应性

Vue3 通过 props 传值被消除响应性

1. 子组件中使用 props

<template>
<p>{{ resourceType }}</p>
</template>

<script>
props: {
    detail: {
      type: Object,
      required: true
    }
  },

setup(props){
	const detail = ref(props.detail)
	const resourceType = computed(() => detail.value.resourceData || '/')
	return { resourceType }
}
</script>

此时页面上一直显示 /， 即便父组件传入的 detail 更新，resourceType 不会更新，说明它不是响应式的。

2. 解决：使用 toRefs以及解构赋值语法。

setup(props){
	const { detail } = toRefs(props)
	const resourceType = computed(() => detail.value.resourceData || '/')
	return { resourceType }
}