uniapp がサブコンポーネント メソッドの呼び出しに失敗した場合はどうすればよいですか?

最近、uniapp を使用して小さなプログラムを開発していたときに、サブコンポーネント メソッドの呼び出しに失敗するという問題が発生しました。調査とデバッグを行った結果、解決策を見つけたので、それを共有します。

まず、この問題が発生するシナリオを見てみましょう。カスタム コンポーネントがページに導入され、コンポーネント内に外部から呼び出す必要があるメソッドがあります。これは、コンポーネント オブジェクトのメソッドでメソッドを定義し、コンポーネント内でそのメソッドを呼び出すことで実現できます。ただし、実際に呼び出すと、以下に示すように、このメソッドは常に null 値を返すことがわかりました。

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

ここでは、親コンポーネントで子コンポーネントのcustomMethod メソッドを呼び出し、戻り値を出力しようとしています。方法。ただし、コンソールでは戻り値が未定義であることがわかります。

調査の結果、uniappのコンポーネントの通信方法がVueのネイティブコンポーネントの通信方法と異なるためであることが判明しました。 uniapp では、uni.$emit を使用してイベントを送信し、コンポーネントでイベントをリッスンする必要があります。正しい例は次のとおりです。

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

この例では、@customEvent を使用してサブコンポーネントのイベントをリッスンし、onCustomEvent メソッドでサブコンポーネントから渡されたデータを処理します。イベントを送信するメソッドは、親コンポーネントで子コンポーネントのメソッドを呼び出すのではなく、子コンポーネントで行う必要があることに注意してください。

これは、uniapp では、親コンポーネントが子コンポーネントのメソッドを直接呼び出すことができないためです。代わりに、データ転送とコンポーネント通信にイベントを使用する必要があります。

要約すると、uniapp とネイティブ Vue のコンポーネント通信方法は少し異なります。 uniapp では、イベントを通じてコン​​ポーネント間で通信する必要があります。特にサブコンポーネントのメソッドを呼び出す場合、これを実現するには $emit を使用してイベントを送信し、サブコンポーネントでイベントをリッスンする必要があります。

この記事が皆様のお役に立てば幸いです。読んでいただきありがとうございます。

以上がuniapp がサブコンポーネント メソッドの呼び出しに失敗した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。