Vue <script setup>中如何通过Prop设置表单Input的type属性？

首先明确：完全可以用Prop来控制input的type属性，你的模板写法:type="InputType"是正确的，问题通常出在以下几个地方：

1. 父组件传参命名错误 #

你定义的Prop是大驼峰InputType，但在Vue模板的静态传参中，必须使用短横线命名（kebab-case），否则Vue无法正确识别：

<!-- 错误写法：静态传参用大驼峰 -->
<YourComponent InputType="password" />

<!-- 正确写法：静态传参用短横线 -->
<YourComponent input-type="password" />

<!-- 如果是动态绑定，可以用大驼峰 -->
<YourComponent :InputType="dynamicType" />

2. 未传值时没有默认值 #

如果父组件没传InputType，input的type会变成空字符串，浏览器会默认 fallback 到text，可能出现预期外的行为。给Prop加默认值就能解决：

<script setup>
defineProps({
  InputType: {
    type: String,
    default: 'text', // 默认设为text
    // 可选：验证传入的type是否合法
    validator: val => ['text', 'password', 'email', 'number', 'tel'].includes(val)
  },
  InputId: String,
  InputLabel: String,
  InputPlaceholder: String
});
</script>

3. 传入了非法的type值 #

浏览器只识别合法的input type（比如text/password/email等），如果传入了foo这种无效值，浏览器会自动忽略，将type设为text。可以通过上面的validator来限制传入值的范围。

修正后的完整子组件代码 #

<script setup>
defineProps({
  InputType: {
    type: String,
    default: 'text',
    validator: val => ['text', 'password', 'email', 'number', 'tel', 'url'].includes(val)
  },
  InputId: String,
  InputLabel: String,
  InputPlaceholder: String
});
</script>

<template>
  <div class="ml-6 mt-5 mr-6 mb-5 lg:w-1/2">
    <label
      :for="InputId"
      class="block text-sm font-medium leading-6 text-gray-900"
    >
      {{ InputLabel }}
    </label>
    <div class="mt-2">
      <input
        :id="InputId"
        :type="InputType"
        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6"
        :placeholder="InputPlaceholder"
      />
    </div>
  </div>
</template>

父组件调用示例 #

<template>
  <!-- 静态传参：密码框 -->
  <YourComponent 
    input-type="password"
    input-id="user-password"
    input-label="登录密码"
    input-placeholder="请输入6-16位密码"
  />

  <!-- 动态传参：根据变量切换type -->
  <YourComponent 
    :input-type="currentInputType"
    input-id="user-email"
    input-label="邮箱"
    input-placeholder="请输入你的邮箱"
  />
</template>

<script setup>
import { ref } from 'vue'
const currentInputType = ref('email')
</script>

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