当前位置: 首页 > news >正文

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

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

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

子组件示例

<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>

父组件示例

<template><!-- 绑定ref --><ContentInput name="xxx" ref="contentInputRef"/>
</template><script setup>// 导入组件import ContentInput from '@/components/content/content.vue';// 定义refconst contentInputRef = ref(null)// 调用子组件所暴露的方法contentInputRef.value.contentIsEmpty()
</script><style lang="scss" scoped>
</style>
http://www.lryc.cn/news/495228.html

相关文章:

  • STL算法之set相关算法
  • vscode中json文件的注释飘红
  • 【微服务】SpringBoot 整合Redis Stack 构建本地向量数据库相似性查询
  • 三:安装服务-controller node
  • 自定义类型: 结构体、枚举 、联合
  • Bert+CRF的NER实战
  • 永久停用PostgreSQL 归档功能
  • 《数字图像处理基础》学习07-图像几何变换之最近邻插值法放大图像
  • pip安装库时报错(请求超时)
  • XPath表达式详解及其在Web开发中的应用
  • Qt中Socket网络编程
  • 【05】Selenium+Python 两种文件上传方式(AutoIt)
  • Python网络编程
  • openssl生成ca证书
  • Oracle RAC 环境下数据文件误建在本地目录的处理过程
  • 新质驱动·科东软件受邀出席2024智能网联+低空经济暨第二届湾区汽车T9+N闭门会议
  • windows11 使用体验记录
  • 202页MES项目需求方案深入解读,学习MES系统设计规划
  • 前端css实例
  • YOLO的框架及版本迭代
  • PotPlayer 最新版本支持使用 Whisper 自动识别语音生成字幕
  • JavaScript零基础入门速通(中)
  • 【Yarn Bug】 yarn 安装依赖出现的网络连接问题
  • 字节青训Marscode_5:寻找最大葫芦——最新题解
  • MySQL —— MySQL 程序
  • LLamafactory API部署与使用异步方式 API 调用优化大模型推理效率
  • 不玩PS抠图了,改玩Python抠图
  • 三维渲染中顺序无关的半透明混合(OIT)(一Depth Peeling)
  • Linux零基础入门--Makefile和make--纯干货无废话!!
  • vim编辑器的一些配置和快捷键