Vue组件中如何在函数内引用modelValue（Vite构建SFC场景）

在Vue 3的<script setup>语法中，defineProps会返回一个包含所有props的对象，你直接使用modelValue会报错，因为它并非全局变量，而是该返回对象的属性。以下是两种可行的解决方式：

方法一：解构props对象 #

直接从defineProps的返回值中解构出modelValue，即可在函数内直接使用：

<script setup>
const { modelValue } = defineProps(['modelValue']);
defineEmits(['update:model-value']); // 注意修正拼写错误：udpate → update

function portPlaceholder() {
    if (modelValue?.type === 'example') return 'something';
    if (modelValue?.type === 'other') return 'something-else';
    return 'default-something';
}
</script>
<template>
    Some input: <input type="text" :placeholder="portPlaceholder()" />
</template>

方法二：通过props对象访问 #

将defineProps的返回值赋值给变量，通过变量访问modelValue属性：

<script setup>
const props = defineProps(['modelValue']);
defineEmits(['update:model-value']);

function portPlaceholder() {
    if (props.modelValue?.type === 'example') return 'something';
    if (props.modelValue?.type === 'other') return 'something-else';
    return 'default-something';
}
</script>
<template>
    Some input: <input type="text" :placeholder="portPlaceholder()" />
</template>

内容的提问来源于stack exchange，提问作者jakubiszon