Uniapp+Vue3基于setup语法实现父页面调子组件方法

在Uniapp项目中，使用组合式API的setup语法能够使代码更加简洁和易于维护。本文将介绍如何使用Vue3的setup语法糖，实现父页面与子组件之间的方法调用，能让页面逻辑交互更加流畅、高效。下面将详细介绍操作步骤与示例代码。

背景

在Vue3中，setup函数提供了一种更灵活和强大的方式组织组件逻辑。通过组合式API，开发者可以在setup中直接使用新的React Hooks风格的API。这对于Uniapp项目来说同样适用，特别是在处理父子组件通信时。

创建子组件并暴露方法

首先，我们来创建一个简单的子组件。在Uniapp项目的components目录下，新建一个名为ChildComponent.vue的文件，并通过defineExpose暴露一个方法给父组件调用：

<template>
  <view> 我是子组件内容 </view>
</template>

<script setup lang="ts">
    const testMethod = () => {
      console.log('子组件test方法被调用啦...');
    };

    defineExpose({
      testMethod
    });
</script>

父组件引用子组件并调用其方法

在父页面的模板部分，使用<ChildComponent>标签引入子组件，并且通过ref="childComponentRef"给子组件添加了一个引用。

在<script setup>块里，先引入ChildComponent组件，再利用ref函数创建了一个名为childComponentRef的响应式引用对象，初始值设为null。当点击按钮触发invokeChildMethod函数时，会先判断childComponentRef.value存在时，才调用子组件暴露出来的 testMethod 方法。

<template>
  <view>
    <ChildComponent ref="childComponentRef"></ChildComponent>
    <button @click="invokeChildMethod">调用子组件方法</button>
  </view>
</template>

<script setup lang="ts">
    import ChildComponent from '@/components/ChildComponent.vue';
    import { ref } from 'vue';

    // 定义一个 ref 来保存子组件实例
    const childComponentRef = ref(null);

    // 调用子组件test方法的函数
    const invokeChildMethod = () => {
      if (childComponentRef.value) {
        childComponentRef.value.testMethod();
      }
    };
</script>

小结

通过以上步骤，利用Vue3的setup语法，我们轻松实现Uniapp项目中父页面与子组件之间方法的交互调用，这种模式在构建复杂的跨组件交互场景时十分实用，有助于优化项目的整体架构与逻辑流程。