Que dois-je faire si uniapp ne parvient pas à appeler une méthode de sous-composant ?

Récemment, alors que j'utilisais uniapp pour développer un petit programme, j'ai rencontré un problème : l'appel de la méthode du sous-composant a échoué. Après quelques recherches et débogages, j'ai trouvé une solution et je la partage maintenant avec vous.

Tout d’abord, examinons le scénario dans lequel ce problème se produit. Un composant personnalisé est introduit dans une page et il existe une méthode dans le composant qui doit être appelée en externe. Nous pouvons y parvenir en définissant la méthode dans les méthodes de l'objet composant et en appelant la méthode à l'intérieur du composant. Cependant, lors de l'appel réel, nous avons constaté que cette méthode renvoie toujours une valeur nulle, comme indiqué ci-dessous :

// 引入组件
<template>
  <custom-component ref="customComponent"></custom-component>
</template>

<script>
  import customComponent from '@/components/custom-component.vue'
  export default {
    components: {
      customComponent
    },
    mounted() {
      // 调用子组件方法
      const data = this.$refs.customComponent.customMethod()
      console.log(data) // 输出：undefined
    }
  }
</script>

// custom-component.vue
<template>
  <div>这是一个自定义组件</div>
</template>

<script>
  export default {
    methods: {
      customMethod() {
        return '这是从子组件返回的数据'
      }
    }
  }
</script>

Ici, nous essayons d'appeler la méthode customMethod du composant enfant dans le composant parent et d'imprimer la valeur de retour de la méthode. Cependant, dans la console, nous constatons que la valeur de retour n'est pas définie.

Après enquête, nous avons découvert que cela est dû au fait que la méthode de communication des composants dans uniapp est différente de la méthode de communication des composants natifs de Vue. Dans uniapp, nous devons utiliser uni.$emit pour envoyer des événements et écouter l'événement dans le composant. L'exemple suivant est le bon :

// 引入组件
<template>
  <custom-component @customEvent="onCustomEvent"></custom-component>
</template>

<script>
  import customComponent from '@/components/custom-component.vue'
  export default {
    components: {
      customComponent
    },
    methods: {
      onCustomEvent(data) {
        console.log(data) // 输出：这是从子组件返回的数据
      }
    }
  }
</script>

// custom-component.vue
<template>
  <div>这是一个自定义组件</div>
</template>

<script>
  export default {
    methods: {
      customMethod() {
        // 向父组件发送事件
        this.$emit('customEvent', '这是从子组件返回的数据')
      }
    }
  }
</script>

Dans cet exemple, nous utilisons @customEvent pour écouter l'événement du composant enfant et traiter les données transmises par le composant enfant dans la méthode onCustomEvent. Il convient de noter que la méthode d'envoi des événements doit être effectuée dans le composant enfant, plutôt que d'appeler la méthode du composant enfant dans le composant parent.

En effet, dans uniapp, le composant parent ne peut pas appeler directement la méthode du composant enfant. Au lieu de cela, nous devons utiliser des événements pour le transfert de données et la communication des composants.

Pour résumer, les méthodes de communication des composants d'uniapp et de Vue native sont légèrement différentes. Dans uniapp, nous devons communiquer entre les composants via des événements. Surtout lors de l'appel de la méthode du sous-composant, nous devons utiliser $emit pour envoyer l'événement et écouter l'événement dans le sous-composant pour y parvenir.

J'espère que cet article sera utile à tout le monde, merci d'avoir lu !

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!