Comment les accessoires uniapp appellent-ils la méthode du composant parent ?

Avec le développement rapide de la technologie front-end, de plus en plus d'applications nécessitent un développement multiplateforme pour améliorer l'efficacité du développement et réduire les coûts de développement. À cet égard, uniapp est devenu un framework populaire. En raison de ses fonctionnalités multiplateformes et de son modèle de développement pratique, de nombreux développeurs choisissent d'utiliser uniapp pour le développement. Cependant, lors du processus de développement à l'aide d'uniapp, vous rencontrerez de nombreux problèmes, tels que la façon d'appeler la méthode du composant parent via des accessoires.

Dans le composant vue, nous pouvons transférer des données et appeler des méthodes via des composants parent-enfant. uniapp est également basé sur vue, nous pouvons donc utiliser le même principe pour implémenter la méthode d'appel du composant parent à l'aide d'accessoires dans uniapp.

Tout d'abord, nous devons définir une méthode dans le composant parent et gérer la logique dont nous avons besoin dans la méthode. Par exemple :

<template>
  <div>
    <Child :updateData="updateData"></Child>
  </div>
<template>
<script>
import Child from './Child.vue'

export default {
  components:{
    Child
  },
  methods:{
    updateData(data){
      console.log(data)
    }
  }
}
</script>

Nous définissons une méthode nommée updateData dans le composant parent, sa fonction est de traiter les données transmises.

Ensuite, nous devons utiliser des accessoires dans le composant enfant pour recevoir cette méthode afin qu'elle puisse être appelée en cas de besoin.

<template>
  <div>
    <button @click="onClick">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  props: {
    updateData: {
      type: Function,
      required: true
    }
  },
  methods:{
    onClick(){
      // 调用父组件的updateData方法
      this.updateData('Hello World')
    }
  }
}
</script>

Dans le composant enfant, nous utilisons des accessoires pour recevoir la méthode updateData transmise par le composant parent et appelons la méthode onClick via l'événement @click. En même temps, nous utilisons this.updateData('Hello World') dans. la méthode onClick pour appeler la méthode updateData du composant parent.

Enfin, nous devons transmettre les données du composant parent au composant enfant afin que les méthodes du composant parent puissent être appelées dans le composant enfant.

<template>
  <div>
    <Child :updateData="updateData"></Child>
  </div>
<template>
<script>
import Child from './Child.vue'

export default {
  components:{
    Child
  },
  methods:{
    updateData(data){
      console.log(data)
    },
    sendDataToChild(){
      this.$refs.child.onClick()
    }
  },
  mounted(){
    this.sendDataToChild()
  }
}
</script>

Dans le composant parent, nous définissons une méthode sendDataToChild, dont la fonction est d'appeler la méthode onClick du composant enfant via this.$refs.child.onClick(). En même temps, exécutez la méthode sendDataToChild dans le hook de cycle de vie monté afin qu'elle puisse être exécutée automatiquement après le rendu du sous-composant.

Grâce au processus ci-dessus, nous pouvons utiliser des accessoires pour appeler la méthode du composant parent dans uniapp. Il convient de noter que lors de l'utilisation d'accessoires pour communiquer entre les composants parents et enfants, nous devons nous assurer que les types et les valeurs des accessoires sont corrects, sinon des erreurs inattendues pourraient survenir.

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!