如何在我的应用程序的<script>部分访问Vue 3 props

Question

在这个简单的 Vue 3 应用程序中，我想将 props 传递给组件并访问脚本部分中的值。我不能，因为它们未定义。

我可以访问模板部分中的值，尽管第一次渲染时，我有一个 v-if 保护，因为第一次渲染时该值是未定义的。

在应用程序的此屏幕截图中，您可以看到值“Floretta”在模板中正确呈现，并且console.log输出显示在defineProps()行之后立即未定义props.pdata.table的值。 （参见下面的Component.vue代码）

我尝试过的：

1. 在 onMounted() 调用的函数中访问 props
2. 在 Electron 主应用程序中同步读取数据文件（包含“Floretta”的文件）

如何访问脚本部分中的数据，例如设置 UI 的其他部分，例如计算表格中显示的日期列表？日期根据 props pdata 对象中的值而有所不同。

这是精简的应用程序。

应用程序.vue：

组件.vue：

Answer 1

这是使用观察者的示例。

<script setup lang="ts">
const props = defineProps({ pdata: Object })

watch(() => props.pdata, () => {
  console.log('==>', props.pdata.value)
}, { deep: true })
</script>