Comment utiliser le composant parent pour accéder à l'instance du composant enfant dans Vue

Vue est un framework frontal couramment utilisé pour créer des applications interactives d'une seule page (SPA) et d'autres applications Web complexes. Dans le développement de composants de Vue, les composants parents peuvent accéder à leurs instances de composants enfants, ce qui constitue une fonctionnalité très importante. Dans cet article, nous présenterons comment utiliser la fonction de communication des composants parent-enfant dans Vue pour atteindre cet objectif.

Communication entre composants dans Vue

Le développement basé sur les composants est l'une des idées fondamentales de Vue, qui favorise la réutilisabilité et la maintenabilité du code. Dans le développement de composants de Vue, chaque composant est une unité indépendante. Chaque composant a son propre état et son propre comportement, et ils peuvent communiquer via des accessoires et des événements.

Dans Vue, le composant parent transmet les données au composant enfant via des accessoires, et le composant enfant informe le composant parent des changements d'état via des événements. Ce modèle de conception de flux de données unidirectionnel nous permet de mieux gérer les relations de communication entre les composants.

Accès aux instances de sous-composants via $refs

Dans Vue, nous pouvons référencer les instances de composants via $refs. $refs est une méthode pratique fournie par Vue pour accéder aux instances de sous-composants. Lors de l'utilisation de l'attribut ref sur un composant, l'objet $refs collecte les instances du composant correspondant via lesquelles vous pouvez accéder aux propriétés et méthodes du sous-composant. L'extrait de code suivant montre comment utiliser $refs pour accéder aux instances de composants enfants.

//父组件模板
<template>
  <div>
    <child ref="child"></child>
  </div>
</template>
<script>
  import Child from './Child.vue';
  export default {
    components: {
      Child
    },
    mounted() {
      console.log(this.$refs.child);//子组件实例
    }
  }
</script>

//子组件模板
<template>
  <div>
    Hello, I am the child component.
  </div>
</template>

Dans le code ci-dessus, le composant parent obtient l'instance du composant enfant en ajoutant ref="child" sur le composant enfant. Dans la fonction hook montée, le composant parent obtient l'instance du composant enfant via this.$refs.child.

Accès aux instances de sous-composants via $children

En plus d'utiliser $refs pour accéder aux instances de sous-composants, vous pouvez également accéder aux instances de sous-composants via $children. Mais veuillez noter que $children n'est pas une donnée réactive, vous devez donc vous assurer que le composant enfant a été créé avant de l'utiliser.

L'extrait de code suivant montre comment utiliser $children pour accéder aux instances de composants enfants.

//父组件模板
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import Child from './Child.vue';

  export default {
    components: {
      Child
    },
    mounted() {
      console.log(this.$children[0]);//通过下标获取子组件实例
    }
  }
</script>

//子组件模板
<template>
  <div>
    Hello, I am the child component.
  </div>
</template>

Dans le code ci-dessus, le composant parent obtient l'instance du composant enfant via this.$children[0].

Conclusion

Dans le développement de composants de Vue, les composants parents peuvent accéder à leurs instances de composants enfants via $refs et $children. Cette fonction est une fonctionnalité très importante de Vue, qui nous permet de mieux gérer les relations de communication entre les composants et d'améliorer la réutilisabilité et la maintenabilité du code lors du développement d'applications complexes. J'espère que cet article vous sera utile et que tout le monde est invité à laisser un message pour en discuter.

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!