Passer au contenu
Sur cette page

Options : Divers

name

Déclare explicitement un nom d'affichage pour le composant.

  • Type :

    ts
    interface ComponentOptions {
      name?: string
    }
  • Détails

    Le nom d'un composant est utilisé dans les cas suivants :

    • L'auto-référence récursive dans le template du composant
    • Affichage dans l'outil d'inspection de l'arbre des composants de Vue DevTools
    • Affichage dans les avertissements concernant les composants

    Lorsque vous utilisez des composants monofichiers, le composant déduit déjà son propre nom à partir du nom du fichier. Par exemple, un fichier nommé MyComponent.vue aura le nom d'affichage déduit "MyComponent".

    Par ailleurs, lorsqu'un composant est enregistré de manière globale via app.component, l'ID global est automatiquement défini comme son nom.

    L'option name vous permet de remplacer le nom déduit, ou de fournir explicitement un nom quand aucun nom ne peut être déduit (par exemple quand on n'utilise pas d'outil de build, ou lors de l'utilisation d'un composant en ligne divisé en plusieurs fichiers).

    Il y a un cas où name est nécessaire : lors de la recherche d'un composant pouvant être mis en cache dans <KeepAlive> via ses props include / exclude.

    TIP

    Depuis la version 3.2.34, un composant monofichier utilisant <script setup> déduira automatiquement son option name en fonction du nom du fichier, supprimant ainsi la nécessité de déclarer manuellement le nom, même lorsqu'il est utilisé avec <KeepAlive>.

inheritAttrs

Vérifie si le comportement par défaut de l'attribut du composant doit être activé ou non.

  • Type :

    ts
    interface ComponentOptions {
      inheritAttrs?: boolean // default: true
    }
  • Détails

    Par défaut, les liaisons d'attributs qui sont situées dans la portée du composant parent et qui ne sont pas reconnues comme des props seront "répercutées". Cela signifie que lorsque nous avons un composant racine unique, ces liaisons seront appliquées à l'élément racine du composant enfant comme des attributs HTML normaux. Lorsque vous créez un composant qui enveloppe un élément cible ou un autre composant, ce n'est pas toujours le comportement souhaité. En donnant à inheritAttrs la valeur false, ce comportement par défaut peut être désactivé. Les attributs sont disponibles via la propriété d'instance $attrs et peuvent être explicitement liés à un élément non racine en utilisant v-bind.

  • Exemple

    vue
    <script>
    export default {
      inheritAttrs: false,
      props: ['label', 'value'],
      emits: ['input']
    }
    </script>
    
    <template>
      <label>
        {{ label }}
        <input
          v-bind="$attrs"
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
        />
      </label>
    </template>

    Lorsque vous déclarez cette option dans un composant qui utilise <script setup>, vous pouvez utiliser la macro defineOptions :

    vue
    <script setup>
    defineProps(['label', 'value'])
    defineEmits(['input'])
    defineOptions({
      inheritAttrs: false
    })
    </script>
    
    <template>
      <label>
        {{ label }}
        <input
          v-bind="$attrs"
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
        />
      </label>
    </template>
  • Voir aussi Attributs implicitement déclarés

components

Un objet qui enregistre les composants devant être accessibles par l'instance actuelle du composant.

  • Type :

    ts
    interface ComponentOptions {
      components?: { [key: string]: Component }
    }
  • Exemple

    js
    import Foo from './Foo.vue'
    import Bar from './Bar.vue'
    
    export default {
      components: {
        // raccourci
        Foo,
        // enregistrement sous un nom différent
        RenamedBar: Bar
      }
    }
  • Voir aussi Enregistrement de composants

directives

Un objet qui enregistre les directives devant être accessibles par l'instance actuelle du composant.

  • Type :

    ts
    interface ComponentOptions {
      directives?: { [key: string]: Directive }
    }
  • Exemple

    js
    export default {
      directives: {
        // permet l'utilisation de v-focus dans le template
        focus: {
          mounted(el) {
            el.focus()
          }
        }
      }
    }
    template
    <input v-focus>
  • Voir aussi Directives personnalisées

Options : Diversa chargé