Vue3 $attr 绑定在父元素上

Question

我有一个这样的输入组件：

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

我想将输入属性（如自动对焦、占位符等）绑定到输入标签上，但它也绑定到父 div 标签上。 div 标签很重要，我不能在输入组件中忽略这个标签。怎么了？

Answer 1

当只有一个根元素时（如您的 div），属性会自动应用于该元素。

您可以使用 inheritAttrs=false 禁用该行为：

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

Vue3 $attr binds on parent element