Discutez de la méthode d'appel des méthodes parent-enfant dans Vue

Vue est un framework JavaScript très couramment utilisé. Il construit des interfaces utilisateur basées sur des composants, et dans ce processus, la communication entre les composants est très importante. Dans Vue, la communication entre les composants parents et les composants enfants peut être réalisée via des accessoires et des événements. Cet article explorera la manière dont les appels de méthode parent-enfant sont effectués dans Vue.

Dans Vue, la communication entre les composants parent et enfant peut être réalisée via des accessoires et des événements. Props est un attribut, qui est une méthode de transmission de données du composant parent au composant enfant. Les événements sont un événement, qui est une méthode d'envoi de messages des composants enfants aux composants parents.

Ci-dessous, nous utiliserons un exemple pour montrer comment appeler des méthodes parent-enfant dans Vue. Tout d'abord, nous créons un nouveau sous-composant nommé "child.vue" :

<template>
  <div>
    <button @click="onClickButton">点击调用父组件方法</button>
  </div>
</template>

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

Dans le sous-composant, nous définissons un bouton et lions un événement de clic. Lorsque l'on clique sur le bouton, nous déclenchons un événement callParentFunc via this.$emit et passons un paramètre vide. De cette façon, le composant enfant envoie un message et le composant parent peut appeler la méthode du composant enfant en écoutant cet événement.

Ensuite, nous recevons cet événement dans le composant parent et appelons la méthode du composant enfant. Dans le composant parent, nous utilisons le composant enfant dans le modèle et écoutons son événement callParentFunc, et lions une méthode onChildClick :

<template>
  <div>
    <h2>我是父组件</h2>
    <Child @callParentFunc="onChildClick"/>
  </div>
</template>

<script>
  import Child from './child.vue'
  export default {
    components:{Child},
    methods: {
      onChildClick() {
        console.log("调用子组件方法")
      }
    }
  }
</script>

Vous pouvez voir que nous utilisons le composant enfant dans le modèle et écoutons l'événement callParentFunc du composant enfant. En même temps, une méthode onChildClick est définie dans les méthodes. Nous pouvons exécuter cette méthode lorsque le composant enfant envoie un message au composant parent.

Résumé : Grâce à l'introduction de cet article, nous comprenons la manière dont la méthode parent-enfant est appelée dans Vue, c'est-à-dire que le composant enfant déclenche un événement via this.$emit et envoie un message à l'extérieur, et le composant parent écoute cet événement. Vous pouvez désormais appeler des méthodes dans les composants enfants. Cette méthode est un moyen très simple et pratique de communiquer entre les composants parents et enfants dans Vue.

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!