uniapp中父组件调用子组件方法

一回生二回熟2024-12-03 23:26

实现过程（setup语法糖形式下）

在子组件完成方法逻辑，并封装。
在子组件中使用defineExpose暴露子组件的该方法。
在父组件完成子组件ref的绑定。
通过ref调用子组件暴露的方法。

子组件示例

html 复制代码

<template>
</template>

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

// 方法的定义
const contentIsEmpty = () => {
    uni.showModal({
        title: `请先完成"${props.name}"的输入`,
        showCancel: false
    })
}

// 暴露方法
defineExpose({
    contentIsEmpty
})
</script>

<style lang="scss" scoped>
</style>

父组件示例

html 复制代码

<template>
    <!-- 绑定ref -->
    <ContentInput name="xxx" ref="contentInputRef"/>
</template>

<script setup>
    // 导入组件
    import ContentInput from '@/components/content/content.vue';

    // 定义ref
    const contentInputRef = ref(null)

    // 调用子组件所暴露的方法
    contentInputRef.value.contentIsEmpty()
</script>

<style lang="scss" scoped>
</style>