Question

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

2022-06-05

2540

vue.js vuejs3 vue-composition-api vue-script-setup

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

parentComponent.vue

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

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

childComponent.vue

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

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

此处在 childComponents 模板中，可以访问 product ，而无需使用 props.product 或 toRef 它。我知道脚本设置会自动注入使用的 props，但我找不到任何信息（在文档中）表明 defineProps 也会执行某些操作。有没有相关信息。

Answer 1

根据此部分：

The script is pre-processed and used as the component's setup() function, which means it will be executed for each instance of the component. Top-level bindings in <script setup> are automatically exposed to the template . For more details

知道 props 直接在模板内部解包，并且 refs 的使用没有 .value 。

如果要在脚本中引用某些 prop，则应使用 props.product ，如本例所示：

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

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

</script>

如果 prop 仅由模板访问，则可以摆脱 const props ，只需调用宏 defineProps ：

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

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