脚本设置中的defineProps是否会自动创建定义的prop的本地属性？

Question

当我们将 prop 传递给组件并使用 DefineProps 从子组件定义该 prop 时，会以某种方式创建属性并可从子组件模板访问该属性。

父组件.vue

<template>
    <child-component v-model="product">
</template>

<script setup>
import childComponent from "./childComponent.vue"
</script>

子组件.vue

<template>
    {{ product }}
</template>

<script setup>
const props = defineProps(['product'])
</script>

在 childComponents 模板中，product无需使用props.product或 toRef 即可访问它。我知道脚本设置会自动注入使用过的道具，但我找不到任何信息（在文档中），defineProps 也做了一些事情。有没有这方面的信息。

Answer 1

根据本节：

该脚本经过预处理并用作组件的setup()函数，这意味着它将针对组件的每个实例执行。中的顶级绑定<script setup> 会自动暴露给template. 更多细节

知道 props 直接在模板内展开，并且 refs 不使用.value.

如果您想在脚本中引用某些道具，您应该props.product像本示例中那样使用：

<script setup>
const props = defineProps(['product'])

const total=computed(()=>props.product.quantity*props.product.unity_price))

</script>

const props如果该道具仅由模板访问，您只需调用宏即可摆脱defineProps：

<template>
    {{ product }}
</template>

<script setup>
defineProps(['product'])
</script>