Uniapp基于Vue3+setup子组件调用父组件方法

Uniapp简介

Uniapp是一个使用Vue.js开发所有前端应用的框架，它能够编译到多个平台如微信小程序、支付宝小程序、字节跳动小程序、H5、App等。它大大简化了多端开发的难度，开发者只需编写一次代码就能适配多个平台。

Vue3组合式API简介

Vue3引入的组合式API允许开发者以更灵活的方式组织和复用代码，特别适用于复杂的业务场景和大型项目。组合式API主要包括setup函数、ref、reactive、defineProps、defineEmits等。

组件通信的基本方式

在Vue中，组件通信主要有以下几种方式：

• 父子组件通信：父组件通过props向下传递数据，子组件通过events向上传递数据。
• 兄弟组件通信：通常借助于事件总线（Event Bus）或状态管理工具如Vuex。
• 跨级组件通信：可以通过provide/inject实现祖先组件向后代组件传递数据或方法。

本文将详细介绍如何在Uniapp中利用Vue3的组合式API（Composition API）通过emits实现子组件调用父组件的方法。

创建父组件

在父组件中，我们可以定义一个方法并将其作为属性传递给子组件。例如，我们在父组件中创建一个名为reflesh的方法：

<template>
    <view>
        <Child @reflesh="reflesh"/>
    </view>
</template>

<script setup>
    import Child from '@/components/Child.vue';

    const reflesh = () => console.log('父组件的刷新方法被调用啦');
</script>

在上述代码中，reflesh方法将在子组件触发事件时调用。

创建子组件

在子组件中，我们可以通过defineEmits宏定义需要发出的自定义事件。例如：

<template>
    <button @click="reflesh">刷新父页面</button>
</template>

<script setup>
    import { defineEmits } from 'vue';

    // 定义要发射的事件名称
    const emits = defineEmits(['reflesh']);

    const reflesh = () => emits('reflesh');
</script>

这样，当按钮被点击时，子组件会发出reflesh事件，父组件可以捕获该事件并执行相应的方法。

小结

通过上述步骤，我们实现了在Uniapp中使用Vue3的组合式API通过emits让子组件调用父组件的方法。

这种方式不仅简洁而且功能强大，可以满足大多数业务场景下的组件通信需求。此外，结合Vue3的其他特性如provide/inject、响应式API等，可以实现更加复杂且高效的组件间通信机制。