Vue组件调试：BaseInput的label意外获取placeholder属性

嘿，这个问题我之前踩过类似的坑，大概率是Vue的默认属性继承机制在搞鬼！结合你描述的组件行为，我来拆解下原因和修复方法：

为什么BaseInput会出现这个问题？ #

核心原因有两个：

• 你没把placeholder声明成BaseInput的组件Props：当父组件传placeholder给BaseInput时，如果这个属性没被定义为props，它会被放进$attrs对象里。
• 单个根元素的自动属性绑定：如果BaseInput的模板是用<label>作为唯一根元素（比如<label>包着<input>），Vue默认会把$attrs里的所有属性自动绑到根元素上。这就导致label意外拿到了placeholder，再加上你手动把placeholder绑给了input，自然两者都带这个属性了。

而BaseTextarea正常，大概率是你在那个组件里做了这两件事之一：要么把placeholder声明成了props，要么设置了inheritAttrs: false关闭了根元素自动继承属性的行为。

怎么修复BaseInput？ #

只需要简单几步：

1. 把placeholder声明为组件Props
   在BaseInput的脚本里，把placeholder加入props列表，这样它就会从$attrs里剥离出来，不会被自动传给根元素：

   <script setup>
   defineProps({
     placeholder: String
   })
   </script>
   

2. 手动绑定剩余属性到label
   确保label标签上绑定v-bind="$attrs"，这样除了placeholder之外的其他属性都会正确绑到label上：

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

3. （可选）关闭自动属性继承
   如果你的组件有多个根元素，或者不想让根元素自动继承未声明的props，可以加个配置关闭默认行为：

   <script setup>
   defineOptions({
     inheritAttrs: false
   })
   defineProps({
     placeholder: String
   })
   </script>
   

这样调整后，placeholder就只会出现在input标签上，label再也不会意外拿到这个属性啦！

内容的提问来源于stack exchange，提问作者Adam Orłowski