Tutoriel de base de VUE3 : Plusieurs modes de communication entre les composants parents et enfants

Avec le développement continu des frameworks front-end modernes, de plus en plus d'entreprises et de développeurs choisissent d'utiliser Vue pour créer leurs interfaces utilisateur. Vue.js est un framework progressif pour la création d'interfaces utilisateur qui fournit une méthode de développement flexible pour créer rapidement des applications monopage de haute qualité.

Dans Vue.js, les composants sont le concept de base pour la création d'interfaces utilisateur. Un composant Vue.js est un module de code autonome et réutilisable avec un cycle de vie. Un composant peut être composé de nombreux autres composants, qui peuvent avoir besoin de communiquer et d'interagir. Cet article présentera plusieurs façons de communiquer entre les composants parents et enfants dans Vue.js.

1. Transmission de propriétés Props

Props est un moyen de transmettre des données des composants parents aux composants enfants. Dans Vue.js, les composants parents peuvent transmettre des données aux composants enfants via des propriétés. Les composants enfants peuvent recevoir ces propriétés et utiliser ces valeurs pour afficher leurs propres modèles.

Dans le composant parent, vous pouvez utiliser l'instruction v-bind pour lier la valeur à l'attribut props du composant enfant :

<template>
  <div>
    <child-component :message="'Hello world'"></child-component>
  </div>
</template>

Dans le composant enfant, vous pouvez recevoir les données transmises par le composant parent via l'attribut props :

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

Grâce à l'attribut props, le flux de données entre les composants parent et enfant peut être clairement exprimé. Cette méthode est une méthode de communication très courante entre les composants parents et enfants dans Vue.js.

2. Événement personnalisé $emit

Dans Vue.js, chaque instance de Vue dispose d'un bus d'événements et vous pouvez utiliser $emit pour déclencher un événement personnalisé. Les composants parents peuvent définir des événements personnalisés et utiliser $emit pour déclencher ces événements dans les composants enfants. Les sous-composants peuvent écouter ces événements via $on et effectuer les opérations correspondantes.

Dans le composant parent, vous pouvez utiliser $emit pour définir un événement personnalisé :

new Vue({
  el: '#app',
  methods: {
    showMessage() {
      this.$emit('message');
    }
  }
})

Dans le composant enfant, vous pouvez utiliser $on pour écouter cet événement personnalisé :

Vue.component('child-component', {
  template: '<div v-on:message="showMessage">Child message</div>',
  methods: {
    showMessage() {
      // 处理点击事件
    }
  }
})

Par $emit événement personnalisé, les composants enfants peut envoyer des messages aux composants parents à des fins de communication.

3. $parent/$children

Dans Vue.js, chaque composant a une propriété $parent et une propriété $children. Ces deux propriétés permettent aux composants d'accéder directement à leurs composants parents et enfants. Cette méthode est plus simple, mais certaines personnes la trouvent peu élégante.

4. Utiliser $refs

Dans Vue.js, chaque composant a une propriété $refs. Tous les sous-composants enregistrés sont accessibles à l'aide de $refs. Cet attribut permet au composant parent d'accéder directement au composant enfant et d'appeler directement ses méthodes et propriétés.

Dans le composant parent, vous pouvez utiliser $refs pour accéder au composant enfant et appeler ses méthodes :

new Vue({
  el: "#app",
  methods: {
    handleClick() {
      this.$refs.childComponent.handleClick();
    }
  },
  components: {
    childComponent
  }
})

Dans le composant enfant, vous pouvez définir une méthode handleClick :

Vue.component('child-component', {
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
})

$refs permet au composant parent d'accéder directement au Les méthodes et propriétés du composant enfant, mais vous devez être prudent lorsque vous les utilisez car la valeur de $refs peut être indéfinie.

Résumé

Dans Vue.js, les composants sont le concept de base pour la création d'interfaces utilisateur. Pour la communication entre les composants parents et enfants, Vue.js fournit une variété de méthodes, telles que des accessoires, des événements personnalisés, $parent/$children, $refs, etc. Dans le développement réel, nous devons choisir une méthode appropriée pour mettre en œuvre la communication entre les composants en fonction de circonstances spécifiques. Dans le même temps, nous pouvons également utiliser ces méthodes pour créer des composants plus flexibles et réutilisables afin d'améliorer l'efficacité du développement et l'expérience utilisateur.

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!