Nuxt3中组件混用<script setup>与普通<script>导致props异常

问题根源 #

你遇到的问题核心在于：<script setup> 和普通 <script> 共存时，组件的 props 最终由 <script setup> 里的 defineProps 决定。之前你在普通 <script> 里单独定义 placeholder props，但 <script setup> 中未声明该属性，导致普通 <script> 里的 props 定义不生效——组件实际只识别 <script setup> 中声明的 modelValue，所以 mounted 钩子中打印的 placeholder 为 undefined。

而移除 <script setup> 后，组件的 props 由普通 <script> 定义接管，自然能正常获取父组件传递的值。

正确实现方案 #

所有 props 统一在 <script setup> 中用 defineProps 声明，普通 <script> 仅用来补充生命周期钩子、组件选项等逻辑，直接通过组件实例访问 props 即可。

子组件 MyInput.vue 示例代码

<script setup>
// 统一声明所有需要的 props
const props = defineProps({
  modelValue: String,
  placeholder: String
})

// 声明 v-model 所需的 emit 事件
const emit = defineEmits(['update:modelValue'])
</script>

<script>
export default {
  mounted() {
    // 通过 this.$props 访问已声明的 props
    console.log('placeholder:', this.$props.placeholder)
  }
}
</script>

<template>
  <input 
    :value="modelValue" 
    @input="emit('update:modelValue', $event.target.value)" 
    :placeholder="placeholder" 
  />
</template>

关键说明 #

Vue 文档中提到的「两者可共存」，是指普通 <script> 可用来定义 <script setup> 无法覆盖的组件选项（如自定义组件名、全局混入、特定生命周期逻辑），但props 必须统一在 <script setup> 中通过 defineProps 声明——这是因为 defineProps 是编译时宏，会直接整合到组件的最终 props 配置中，普通 <script> 里的重复 props 定义会被忽略或覆盖，尤其在 Nuxt3 的编译环境下表现更明显。

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