Vue3自定义输入组件如何无需手动定义即可继承原生input默认属性

你需要的能力可以通过Vue内置的透传Attribute（非Prop Attribute） 机制实现，无需引入额外依赖，分两种场景处理：

场景1：组件根元素就是input（你当前的基础代码结构） #

Vue2和Vue3的单根组件默认都会自动将未声明为props的传入属性，挂载到组件的根DOM元素上。你现在写的基础代码不需要做任何修改，默认就可以实现传入placeholder等原生属性自动应用到内部input的效果。

如果之前手动关闭了自动继承，恢复配置即可：

<template>
  <input type="text"> 
</template>

<script>
export default {
  name: "CustomInput",
  inheritAttrs: true // 该配置默认值为true，无特殊需求可以省略
}
</script>

场景2：组件外层有包裹元素（根元素不是input） #

如果你的组件外层加了div等容器做样式封装，需要手动关闭根元素的自动继承，将透传属性绑定到内部input上：

Vue2 写法 #

<template>
  <div class="input-container">
    <input type="text" v-bind="$attrs" v-on="$listeners"> 
  </div>
</template>

<script>
export default {
  name: "CustomInput",
  inheritAttrs: false // 关闭根元素自动继承，避免属性挂载到外层div
}
</script>

$attrs包含所有未被props声明的传入属性，$listeners包含所有父组件绑定的事件监听器，分别绑定后即可实现原生属性、事件的全量透传。

Vue3 写法 #

选项式API

和Vue2写法基本一致，Vue3已经把事件监听器整合到$attrs中，不需要单独绑定$listeners：

<template>
  <div class="input-container">
    <input type="text" v-bind="$attrs"> 
  </div>
</template>

<script>
export default {
  name: "CustomInput",
  inheritAttrs: false
}
</script>

<script setup>语法糖

用useAttrs获取透传属性集合绑定即可：

<template>
  <div class="input-container">
    <input type="text" v-bind="attrs"> 
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

补充说明：Vue3的透传属性默认包含class、style、原生事件监听器，不需要额外处理；Vue2的$attrs默认不包含class、style，如果需要将父组件传入的样式类也应用到内部input，需要单独声明props接收或者手动获取根元素的class属性转发。

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