Question

Vue 3-反应性道具更新未反映在子组件脚本中

2023-10-27

544

javascript typescript vue.js vuejs3

我试图将反应数据作为 prop 传递给 Vue 3 中的子组件。数据在子组件的模板中正确更新，但似乎没有反映在子组件的脚本中。在父组件中：

<script setup lang="ts">
import { ref } from 'vue'

const someDataId = ref<number | null>()

const someFunction = (id) => {
    someDataId.value = id
}
</script>

<template>
<ChildComponent :dataId="someDataId" />
</template>

在子组件中：

<script setup lang="ts">
const { dataId } = defineProps<{
    dataId: number | null | undefined
}>()

console.log(dataId)
</script>

<template>
{{ dataId }}
</template>

dataId prop 在模板中正确更新，但在记录到控制台时显示为 undefined 。

我尝试在 onUpdated 和 watch 函数中处理 prop，但问题仍然存在。使用 onUpdated 时， dataId 保持 undefined ，使用 watch 时，控制台中甚至没有显示任何内容，因为我猜它没有检测到任何更改。使用 nextTick 也不起作用。

我很感激任何关于如何解决此问题的帮助或见解。谢谢！

Answer 1

脚本内容在创建时执行一次，为了看到这里的变化，您应该使用像下面这样的观察者，并且不要破坏道具以免失去反应性：

<script setup lang="ts">
import {watch} from 'vue'

const props = defineProps<{
    dataId: number | null | undefined
}>()



watch(()=>props.dataId, (newVal)=>{
  console.log(newVal)
},{
immediate:true
})

</script>

<template>
{{ dataId }}
</template>

在 Vue 3.3 中，您可以破坏道具，但这仍然是一个实验性的功能。