Propriété inheritAttrs de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,inheritAttrsest une option de composant qui détermine si les attributs non-prop (c'est-à-dire les attributs qui ne sont pas explicitement définis comme props) transmis du composant parent au composant enfant doivent être hérités sur l'élément racine du composant enfant.

Par défaut,inheritAttrsla valeur detrue, ce qui signifie que tous les attributs non-prop transmis par le composant parent seront automatiquement liés à l'élément racine du composant enfant.inheritAttrsdéfini àfalse。

Comment comprendreinheritAttrs？

Imaginez que vous avez un composantMyButton, il reçoit unlabelen tant que prop, et vous voulez que le composant parent puisse transmettre des attributs supplémentaires, tels queclassoustyle. Par défaut, ces attributs supplémentaires seront directement liés àMyButtonl'élément racine de (généralement un<button>élément).

Exemple

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

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

Dans cet exemple, si le composant parent passe unclassattribut, il sera automatiquement lié àMyButtonde<button>élément.

inheritAttrs: falseLe rôle de

Si vous ne voulez pas que ces attributs non-prop soient automatiquement liés à l'élément racine, vous pouvez définirinheritAttrsdéfini àfalse. De cette façon, vous pouvez décider manuellement comment ces attributs doivent être gérés.

Exemple

// MyButton.vue
<template>
  <div>
    <button> {{ label }} </button>
    <span v-bind="$attrs">Attributs supplémentaires</span>
  </div>
</template>

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

Dans cet exemple, les attributs non-prop ne seront pas liés à<button>élément, mais sont plutôt liés à<span>élément. Vous pouvez utiliserv-bind="$attrs"pour lier les attributs à n'importe quel élément de votre choix.

Cas d'utilisation

  1. Liaison d'attributs personnalisée: Lorsque vous ne voulez pas que les attributs non-prop soient automatiquement liés à l'élément racine, vous pouvez désactiverinheritAttrs, et contrôler manuellement la façon dont ces attributs sont liés.

  2. Éviter les conflits d'attributs: Dans certains cas, les attributs non-prop liés automatiquement peuvent entrer en conflit avec les attributs du composant enfant. La désactivationinheritAttrspeut éviter ce problème.

  3. Développement avancé de composants: Lors du développement de composants complexes, vous pouvez avoir besoin de plus de flexibilité dans la gestion du passage et de la liaison des attributs.inheritAttrs: falseoffre cette flexibilité.

Vue3 选项式 APIVue3 API des options

Autres extensions