Comment vue appelle les méthodes dans les composants à travers les niveaux

Vue, en tant que framework frontal populaire, dispose de puissantes capacités de liaison de données et de développement de composants. Cependant, dans les projets réels, nous rencontrons souvent le besoin d'appeler des méthodes dans des composants à plusieurs niveaux. Cet article explique comment utiliser le mécanisme de communication des composants de Vue pour implémenter des méthodes d'appel à plusieurs niveaux dans les composants.

1. Bus d'événements global

Vue propose un bus d'événements global très simple - un bus d'événements. Le centre d'événements est une instance globale de Vue accessible par tous les composants et utilisée pour la communication entre les composants. Généralement, nous créons un centre d'événements dans l'instance racine de Vue.

1. Créer un centre d'événements global

Dans le composant racine, nous pouvons utiliser la méthode "$emit" de l'instance Vue pour distribuer des événements au centre d'événements, ou nous pouvons utiliser la méthode "$on" pour écouter événements dans le centre d'événements. Voici un exemple de code :

// 在 main.js 中创建事件中心
import Vue from 'vue'

export const EventBus = new Vue()

// 在组件中派发事件
import { EventBus } from './main.js'

EventBus.$emit('my-event', data)

// 在组件中监听事件
import { EventBus } from './main.js'

EventBus.$on('my-event', data => {
  // 处理事件
})

2. Utilisez le centre d'événements global pour appeler des méthodes entre composants

En utilisant le centre d'événements, nous pouvons implémenter des méthodes d'appel entre composants. Dans le composant A, utilisez la méthode « $emit » pour distribuer les événements au centre d'événements ; dans le composant B, utilisez la méthode « $on » pour écouter les événements, puis appelez la méthode du composant A. Voici un exemple d'implémentation :

// 组件A
export default {
  methods: {
    myMethod() {
      console.log('Hello, world!')
    }
  }
}

// 组件B
import { EventBus } from './main.js'

export default {
  mounted() {
    EventBus.$on('my-event', () => {
      this.$refs.componentA.myMethod()
    })
  }
}

Dans le code ci-dessus, "this.$refs.componentA" représente le sous-composant nommé "componentA" monté dans le composant B. De cette façon, nous pouvons La méthode du composant A est appelée.

2. $refs

En plus du centre d'événements, Vue fournit également un moyen simple d'accéder aux instances de composants - $refs. Il s'agit d'un objet qui contient des instances de tous les composants enfants du composant actuel qui font référence à l'attribut « ref ». Nous pouvons appeler des méthodes de composants enfants en accédant à l'objet $refs.

1. Define $ref

Dans les modèles, nous pouvons référencer des composants enfants en définissant l'attribut "ref". Voici un exemple d'implémentation :

// 子组件
<template>
  <div ref="myComponent">Hello, world!</div>
</template>

Dans le code ci-dessus, nous définissons une "ref" nommée "myComponent" dans le template du composant enfant. Cette "ref" est accessible dans le composant parent via l'objet $refs.

2. Utilisez $refs pour appeler des méthodes dans le composant

Dans le composant parent, nous pouvons utiliser l'objet $refs pour accéder aux méthodes du composant enfant. Voici un exemple d'implémentation :

// 子组件
export default {
  methods: {
    myMethod() {
      console.log('Hello, world!')
    }
  }
}

// 父组件
export default {
  mounted() {
    this.$refs.myComponent.myMethod()
  }
}

Dans le code ci-dessus, dans le hook monté du composant parent, nous utilisons "this.$refs.myComponent" pour obtenir l'instance du composant enfant et appeler sa méthode interne.

Résumé :

Cet article présente deux méthodes d'utilisation du centre d'événements et de $refs pour implémenter des appels inter-niveaux entre les composants Vue. Les centres d'événements conviennent à la communication entre les composants non parents et enfants, tandis que les $refs conviennent à la communication entre les composants parents et enfants. Dans le développement réel, nous choisissons la méthode appropriée en fonction de la situation réelle afin de mieux gérer l'état et l'interaction des composants.

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!