Vue3 inheritAttrs プロパティ

Vue3 选项式 APIVue3 オプションAPI

Vue3 では、inheritAttrsはコンポーネントオプションであり、親コンポーネントから子コンポーネントに渡される非 prop 属性（つまり、明確に prop として定義されていない属性）を子コンポーネントのルート要素に継承するかどうかを決定します。

デフォルトでは、inheritAttrsの値はtrueであり、つまり親コンポーネントから渡されるすべての非 prop 属性は自動的に子コンポーネントのルート要素にバインドされます。これらの属性の継承動作を手動で制御したい場合は、inheritAttrsに設定できますfalse。

どのように理解するかinheritAttrs？

想像してみてください。コンポーネントMyButtonがあり、それはlabelを prop として受け取り、親コンポーネントがclass 或 styleなどの追加の属性を渡せるようにしたいとします。デフォルトでは、これらの追加の属性は直接MyButtonのルート要素（通常は<button>要素）にバインドされます。

例

// MyButton.vue
<template>
  <button :class="$attrs.class"> {{ label }} </button>
</template>

<script>
export default {
  props: ['label'],
  inheritAttrs: true
}
</script>

この例では、親コンポーネントがclass属性を渡した場合、それは自動的にMyButtonの<button>要素にバインドされます。

inheritAttrs: falseの役割

これらの非 prop 属性がルート要素に自動的にバインドされることを望まない場合は、inheritAttrsに設定できますfalse。これにより、これらの属性の処理方法を手動で決定できます。

例

// MyButton.vue
<template>
  <div>
    <button> {{ label }} </button>
    <span v-bind="$attrs">Additional Attributes</span>
  </div>
</template>

<script>
export default {
  props: ['label'],
  inheritAttrs: false
}
</script>

この例では、非 prop 属性は<button>要素にはバインドされず、代わりに<span>要素にバインドされます。v-bind="$attrs"を使用して、属性を任意の要素にバインドできます。

使用シーン

  1. カスタム属性バインディング：非 prop 属性がルート要素に自動的にバインドされることを望まない場合、inheritAttrsを無効にし、これらの属性のバインド方法を手動で制御できます。

  2. 属性の競合を回避：特定の状況では、自動的にバインドされた非 prop 属性が子コンポーネントの属性と競合する可能性があります。inheritAttrsを無効にすることで、この問題を回避できます。

  3. 高度なコンポーネント開発：複雑なコンポーネントを開発する際、属性の受け渡しとバインディングをより柔軟に処理する必要があるかもしれません。inheritAttrs: falseはこの柔軟性を提供します。

Vue3 选项式 APIVue3 オプションAPI

その他の拡張