Explication détaillée de la façon d'obtenir des instances de composants à l'aide de l'attribut refs dans le document Vue

Vue.js, en tant que framework front-end, est devenu de plus en plus largement utilisé dans le domaine du développement front-end ces dernières années. Dans la documentation officielle de Vue, nous pouvons voir de nombreux guides et conseils de développement utiles. Parmi eux, l'attribut refs est l'un des moyens d'obtenir une instance de composant. Aujourd'hui, nous en apprendrons davantage sur cet attribut.

Concept de base de l'attribut refs

refs est une propriété de Vue.js, utilisée pour obtenir le nœud DOM ou l'instance de sous-composant dans le composant. Cela peut nous aider à accéder aux éléments, méthodes et propriétés DOM du composant enfant dans le composant parent, interagissant ainsi directement avec le composant enfant. Grâce à l'attribut refs, nous pouvons accéder directement aux données et aux méthodes à l'intérieur du composant enfant sans transmettre les données et les méthodes via des accessoires et des événements.

Utilisation de l'attribut refs

L'utilisation de base de l'attribut refs est la suivante :

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <input ref="inputBox" type="text"/>
    <ChildComponent ref="childComponent"/>
  </div>
</template>

Dans le modèle ci-dessus, nous pouvons obtenir leurs instances en ajoutant des attributs ref aux nœuds DOM ou en ajoutant des attributs ref aux sous-composants. À ce stade, nous pouvons utiliser this.$refs dans le composant parent ou l'instance Vue pour accéder à leurs instances.

export default {
  mounted() {
    // 访问inputBox实例
    this.$refs.inputBox.focus();

    // 访问childComponent实例
    this.$refs.childComponent.doSomething();
  }
}

Dans le hook monté, nous pouvons accéder aux instances des sous-composants via this.$refs pour obtenir leurs méthodes et propriétés. Par exemple, dans le code ci-dessus, nous pouvons accéder à l'instance de la zone de saisie via this.$refs.inputBox et appeler sa méthode focus() de la même manière, nous pouvons accéder à l'instance du composant enfant via this.$refs.childComponent ; et appelez-le Appelez sa méthode doSomething().

De plus, l'attribut refs peut également créer un tableau via [ref + v-for] et lier chaque référence à chaque élément du tableau.

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <div v-for="i in 5" :key="i" :ref="'item'+i">{{ i }}</div>
  </div>
</template>

Dans le modèle ci-dessus, nous utilisons l'instruction v-for pour parcourir le tableau, et chaque élément générera un nombre. Nous pouvons ensuite utiliser ce numéro dans l'attribut ref pour créer un tableau et les lier à chaque élément individuellement.

export default {
  mounted() {
    // 访问Ref数组中的元素
    console.log(this.$refs.item1.innerHTML); // 1
    console.log(this.$refs.item2.innerHTML); // 2
    console.log(this.$refs.item3.innerHTML); // 3
    console.log(this.$refs.item4.innerHTML); // 4
    console.log(this.$refs.item5.innerHTML); // 5
  }
}

Avec le code ci-dessus, nous pouvons accéder à l'attribut innerHTML de chaque élément, qui génère 1, 2, 3, 4, 5.

Résumé

L'attribut refs est une méthode importante pour obtenir des instances de composants dans Vue.js. Il nous permet d'accéder plus facilement aux nœuds, méthodes et propriétés DOM dans les sous-composants. Que vous développiez une simple page Web ou une application Web complexe, vous pouvez utiliser l'attribut refs pour simplifier votre code et améliorer l'efficacité du développement.

Il convient de noter que l'attribut refs ne doit être utilisé que lorsque vous devez accéder directement à des composants ou des éléments enfants. Si vous souhaitez établir une communication entre deux composants, l'utilisation d'accessoires et d'événements est plus appropriée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!