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

实现过程(setup语法糖形式下)

  1. 在子组件完成方法逻辑,并封装。
  2. 在子组件中使用defineExpose暴露子组件的该方法。
  3. 在父组件完成子组件ref的绑定。
  4. 通过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>
相关推荐
鬼手点金2 小时前
opencode-全能开发者配置
java·linux·服务器·前端·javascript·学习·前向传播
溪语流沙2 小时前
【Web全栈进阶】Alembic数据库迁移:改表结构不再删库
前端·数据库·python·elasticsearch·postgresql
AI你一生一世2 小时前
当构建工具成为基础设施:从 Tailwind 被收购谈起,前端工具链的“归属”难题
前端·构建工具·tailwind css·前端工具链·开源软件收购·技术中立性·前端基础设施
_zxd2 小时前
TypeScript 类型树
前端·typescript
炸鸡叔2 小时前
我做了 BotBus:从手机续聊本地 Agent,查看文件和终端
前端·后端
骑着蜗牛撵大象3273 小时前
多 Agent 串行流水线:把一个任务拆成可重试、可续跑的 Pipeline 节点链
前端·langchain
2601_962885723 小时前
AlphaFeed 支持哪些 K 线周期?period参数怎么传?
前端·数据库·python
企业数字化笔记3 小时前
AI工具的文件和参数怎么设计?上传校验、配置版本与可复现任务
前端·人工智能
铁皮饭盒3 小时前
还是网页端, 46mb模型, 抠图功能升级了, 抠任意主体, 还是不要显卡, 不要python, 满意吗?
前端·javascript·后端