uniapp调用子组件方法失败怎么办-uni-app-PHP中文网

uniapp调用子组件方法失败怎么办

PHPz

发布： 2023-04-27 09:02:52

原创

1450人浏览过

最近在使用uniapp开发小程序的时候，碰到了一个问题：调用子组件方法失败。经过一番研究和调试，我找到了解决方法，现在分享给大家。

首先，我们来看一下遇到该问题的场景。在一个页面中引入了一个自定义组件，而在该组件中有一个方法需要在外部调用。我们可以通过在组件对象的methods中定义该方法，并且在组件内部调用该方法来实现。但是，在实际调用的时候，我们发现这个方法总是返回空值，如下所示：

// 引入组件
<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方法，并打印该方法的返回值。但是，在控制台中，我们发现返回值为undefined。

经过排查，发现这是因为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方法中处理了从子组件传递过来的数据。需要注意的是，发送事件的方法需要在子组件中进行，而不是在父组件中调用子组件的方法。