Vue子组件input元素type属性无法透传问题求助

你的问题出在子组件里对type属性的绑定写法上——你把它写成了[$attrs.type]，这会把值包装成一个数组，但input的type属性只接受字符串类型（比如"text"、"password"），数组类型不符合属性要求，浏览器自然无法正确解析，导致type不生效。

而你看到maxlength能生效，其实是浏览器做了隐式类型转换，自动取了数组的第一个元素，但这属于不规范写法，不能依赖这种行为。

给你两种正确的解决方式：

方式一：直接绑定单个属性 #

去掉数组包裹，直接绑定$attrs.type即可，其他属性同理：

<!-- 子组件模板 -->
<template>
  <input :type="$attrs.type" :maxlength="$attrs.maxlength" />
</template>

方式二：批量透传所有属性 #

如果父组件传递的属性都是input原生支持的，更简便的方式是用v-bind="$attrs"一次性透传所有属性，不用逐个绑定：

<!-- 子组件模板 -->
<template>
  <input v-bind="$attrs" />
</template>

这样type、maxlength、placeholder、required以及父组件传递的class、style都会自动透传并正确生效。

如果需要给子组件的input添加自定义属性（比如自定义class），也可以和v-bind="$attrs"结合使用：

<!-- 子组件模板 -->
<template>
  <input v-bind="$attrs" class="my-custom-input" />
</template>

完整示例 #

父组件：

<template>
  <child-component type="text" maxlength="20" placeholder="请输入内容" required />
</template>

子组件（用批量透传的写法）：

<template>
  <input v-bind="$attrs" />
</template>

这样就能正常实现所有属性的透传，包括type属性。

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