Was soll ich tun, wenn Uniapp eine Unterkomponentenmethode nicht aufrufen kann?

Als ich kürzlich mit uniapp ein kleines Programm entwickelte, stieß ich auf ein Problem: Der Aufruf der Unterkomponentenmethode schlug fehl. Nach einiger Recherche und Fehlerbehebung habe ich eine Lösung gefunden und teile sie nun mit Ihnen.

Schauen wir uns zunächst das Szenario an, in dem dieses Problem auftritt. Eine benutzerdefinierte Komponente wird in eine Seite eingeführt und es gibt eine Methode in der Komponente, die extern aufgerufen werden muss. Dies können wir erreichen, indem wir die Methode in den Methoden des Komponentenobjekts definieren und die Methode innerhalb der Komponente aufrufen. Beim tatsächlichen Aufruf haben wir jedoch festgestellt, dass diese Methode immer einen Nullwert zurückgibt, wie unten gezeigt:

// 引入组件
<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>

Hier versuchen wir, die Methode „customMethod“ der untergeordneten Komponente in der übergeordneten Komponente aufzurufen und die Methoden auszugeben Rückgabewert. Allerdings stellen wir in der Konsole fest, dass der Rückgabewert undefiniert ist.

Nach einer Untersuchung wurde festgestellt, dass dies daran liegt, dass sich die Kommunikationsmethode der Komponenten in Uniapp von der Kommunikationsmethode der nativen Komponenten von Vue unterscheidet. In uniapp müssen wir uni.$emit verwenden, um Ereignisse zu senden und das Ereignis in der Komponente abzuhören. Das Folgende ist das richtige Beispiel:

// 引入组件
<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>

In diesem Beispiel verwenden wir @customEvent, um das Ereignis der Unterkomponente abzuhören und die von der Unterkomponente in der Methode onCustomEvent übergebenen Daten zu verarbeiten. Es ist zu beachten, dass die Methode zum Senden von Ereignissen in der untergeordneten Komponente ausgeführt werden muss, anstatt die Methode der untergeordneten Komponente in der übergeordneten Komponente aufzurufen.

Das liegt daran, dass in Uniapp die übergeordnete Komponente die Methode der untergeordneten Komponente nicht direkt aufrufen kann. Stattdessen müssen wir Ereignisse für die Datenübertragung und Komponentenkommunikation verwenden.

Zusammenfassend lässt sich sagen, dass sich die Komponentenkommunikationsmethoden von Uniapp und nativem Vue geringfügig unterscheiden. In Uniapp müssen wir zwischen Komponenten über Ereignisse kommunizieren. Insbesondere beim Aufrufen der Methode der Unterkomponente müssen wir $emit verwenden, um das Ereignis zu senden und das Ereignis in der Unterkomponente abzuhören, um dies zu erreichen.

Ich hoffe, dieser Artikel ist für alle hilfreich, vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Uniapp eine Unterkomponentenmethode nicht aufrufen kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!