Attributs intégrés de Vue3

En Vue.js, is, key et ref sont trois attributs intégrés couramment utilisés, utilisés comme suit.

Attribut Fonction principale Utilisation/Exemple
is Résout les restrictions de syntaxe des balises HTML, spécifie dynamiquement le composant/la balise native à rendre

<tag is="component-name">
<component :is="variable">

<ul><li is="my-component"></li></ul>
key Fournit un identifiant unique au DOM virtuel de Vue, améliore l'efficacité de rendu des listes et garantit un état de composant correct <tag key="unique-value">
<tag :key="item.id">
<div v-for="item in list" :key="item.id">{{item}}</div>
ref Obtient un élément DOM ou une instance de composant, utilisé pour manipuler directement le DOM natif / appeler les méthodes d'un composant enfant Modèle : ref="name"
Script : this.$refs.name
<input ref="inputRef">
this.$refs.inputRef.focus()

is 属性

En Vue.js, l'attribut is est généralement utilisé pour implémenter des composants dynamiques, particulièrement utile lorsque vous souhaitez basculer dynamiquement entre différents composants à l'exécution.

  • Type: String ou Object
  • Objectif: isL'attribut est utilisé pour spécifier dynamiquement le<component>composant actuel qui doit afficher quel composant enfant. Généralement combiné avec<component>l'élément `component` et les fonctionnalités de composant dynamique, vous permettant de basculer entre différents composants à l'exécution en fonction des données.

Exemple

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Basculer le composant</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

Dans le code ci-dessus,currentComponentest une propriété de données qui détermine<component>quel composant spécifique l’élément doit rendre. Lorsque le bouton est cliqué, appelertoggleComponentla méthode fera basculercurrentComponentla valeur, modifiant ainsi dynamiquement le composant rendu.

Remarque :

  • Notes:
    • isLa valeur de l’attribut peut être soit une chaîne du nom du composant, soit un objet composant.
    • Lors de l’utilisation d’une chaîne, le nom du composant doit correspondre au nom du composant enregistré.
    • Si vous utilisez un objet, vous pouvez référencer directement l’objet composant ou utiliser une propriété calculée dynamique pour retourner l’objet composant.

key 属性

  • Type: String ou Number

  • ObjectifDans le rendu de liste de Vue.js, chaquev-forélément dans une boucle doit avoir unekeyattribut.keyLe rôle de `key` est d’aider Vue à identifier l’unicité de chaque nœud, permettant ainsi de mettre à jour efficacement le DOM virtuel. Lorsque Vue effectue un nouveau rendu de la liste, il va, en fonction dekeydécider s'il faut réutiliser les éléments DOM existants ou les recréer.

    Exemple

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    Dans le code ci-dessus,item.idaskeyl'attribut, garantissant que chaque élément de liste peut être correctement identifié et traité par Vue lors de la mise à jour des données.

  • Notes:

    • keyIl doit être unique et stable. Stable signifie,keyqu'il ne doit pas changer lorsque les données changent ; sinon, cela affectera les performances de Vue et la stratégie de réutilisation du DOM virtuel.
    • Évitez d'utiliser index commekeysauf si vous savez explicitement que l'ordre des éléments de la liste ne changera pas.

ref 属性

  • Type: String ou Object

  • Objectif: refIl est utilisé pour enregistrer des informations de référence pour des éléments ou des composants enfants. En développement réel, vous pouvez utiliserrefpour accéder à des éléments DOM spécifiques ou à des instances de composants enfants, effectuant ainsi des opérations telles que l'appel de méthodes, l'accès à des propriétés, etc.

Ajouter ref à un élément DOM

Exemple

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // accéder à l'élément DOM
this.$refs.inputField.focus(); // appeler la méthode de l'élément DOM
  }
}
</script>

Ajout d'une ref à un composant enfant

Exemple

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
console.log(this.$refs.childRef); // accéder à l'instance du composant enfant
this.$refs.childRef.doSomething(); // appeler la méthode du composant enfant
  }
}
</script>

Notes:

  • Lors de l'utilisation dans le template,refVue fournira un$refsobjet correspondant, grâce auquel vous pouvez accéder à l'élément DOM enregistré ou à l'instance du composant enfant.
  • Évitez d'abuser de `ref`ref, et dans la mesure du possible, opérez sur le DOM et les composants enfants via des approches pilotées par les données et la gestion des événements afin de garder le code maintenable et clair.
Autres extensions