Comment les méthodes publiques Vue appellent-elles d'autres méthodes de composants ?

Dans Vue, la communication entre les composants est un problème très critique. Un composant peut avoir besoin d'appeler la méthode d'un autre composant pour implémenter ses propres fonctions. Dans ce cas, nous devons utiliser des moyens techniques pour établir la communication entre les composants.

Vue fournit de nombreuses méthodes pour implémenter la communication entre les composants, notamment le bus d'événements, Vuex, les accessoires, l'émission, etc. Mais lorsque nous devons appeler des méthodes d’autres composants dans des méthodes publiques, l’utilisation de ces méthodes peut devenir compliquée et gênante. À l'heure actuelle, nous pouvons utiliser $root et $refs sur l'instance Vue pour appeler d'autres méthodes de composants.

$root et $refs sont deux propriétés de l'instance Vue, qui nous permettent d'accéder à un composant depuis un autre composant. $root est l'instance racine de Vue et peut accéder à l'intégralité de l'application Vue. $refs est un objet qui contient tous les sous-composants avec des attributs ref.

Tout d'abord, nous devons définir une méthode dans un autre composant et ajouter un attribut ref à ce composant dans le modèle. Par exemple :

<template>
  <div>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$emit('increment')
      }
    }
  }
</script>

Ici, nous définissons une méthode d'incrémentation et la lions à un bouton. Lorsque vous cliquez sur le bouton, la méthode d'incrémentation déclenche un événement personnalisé « incrément ». En même temps, nous spécifions ce composant comme nœud enfant de son composant parent et lui ajoutons un attribut ref.

Ensuite, dans le composant parent, nous pouvons accéder au composant enfant via l'attribut $refs et appeler ses méthodes. Par exemple :

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    created() {
      console.log(this.$refs.child)
      this.$refs.child.increment()
    }
  }
</script>

Ici, nous avons créé un composant parent et ajouté un composant enfant ChildComponent dans le modèle. En même temps, nous obtenons l'instance du composant enfant via this.$refs.child et appelons sa méthode d'incrémentation. Nous appelons $refs dans le hook créé car le sous-composant n'a pas encore été créé lorsque le hook monté est utilisé.

De cette façon, nous pouvons facilement appeler des méthodes d'autres composants dans des méthodes publiques. Il suffit d'obtenir l'instance de composant correspondante via $root ou $refs dans la méthode publique et d'appeler directement sa méthode.

Il convient de noter que $refs est un objet non réactif et qu'il ne sera rempli que lorsque le composant sera rendu, donc si nous avons besoin d'obtenir l'instance du composant enfant avant que le composant ne soit rendu, nous pouvons utiliser le Attribut $children.

Pour résumer, appeler d'autres composants via $root et $refs est une méthode très pratique et pratique. Cependant, nous devons prêter attention à certains détails, comme si le composant a été rendu, s'il existe un attribut ref, etc. Cette méthode peut fournir une bonne solution lorsque nous devons appeler d’autres méthodes de composants dans des méthodes publiques.

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!