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 }
}