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

defineExpose 显式导出子组件方法

当父组件调用子组件的script setup中的方法时,必须显式导出该方法。因为 script setup 中定义的变量和方法默认是局部的,只有显式导出后,父组件才能访问这些方法。

//父组件-Parent
<template><el-button type="primary" @click="addOrUpdateHandle()">{{ $i18("add") }}</el-button><!-- 弹窗, 新增 / 修改 --><add-or-update ref="addOrUpdateRef"></add-or-update>
</template>
<script setup>
import { unref } from "vue";
const addOrUpdateHandle = (row) => {const instance = unref(addOrUpdateRef);if (instance && typeof instance.init === "function") {instance.init(row);}
};
</script>
//子组件-Child
<template><el-dialogv-model="visible"></el-dialog>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({visible: false,
});
const init = () => {state.visible = true;
};
// 使用 defineExpose 导出 init 方法
defineExpose({init,
});
</script>
http://www.lryc.cn/news/447802.html

相关文章:

  • vue 解决列表界面进入明细返回查询条件不变
  • 华为NAT ALG技术的实现
  • 【移植】轻量系统STM32F407芯片移植案例
  • k8s 修炼手册
  • 重回1899元,小米这新机太猛了
  • jmeter本身常用性能优化方法
  • Vue3中el-table组件实现分页,多选以及回显
  • 柯桥韩语学校|韩语每日一词打卡:회갑연[회가변]【名词】花甲宴
  • python概述
  • 使用celery+Redis+flask-mail发送邮箱验证码
  • 【第十四章:Sentosa_DSML社区版-机器学习之时间序列】
  • Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官
  • 【C++】检测TCP链接超时——时间轮组件设计
  • 中国新媒体联盟与中运律师事务所 建立战略合作伙伴关系
  • 【ArcGIS微课1000例】0121:面状数据共享边的修改方法
  • 图论(dfs系列) 9/27
  • 如何在Windows上安装Docker
  • golang格式化输入输出
  • Jenkins基于tag的构建
  • 性能设计模式
  • Android 热点分享二维码功能简单介绍
  • SIEM之王,能否克服创新者的窘境?
  • (JAVA)浅尝关于 “栈” 数据结构
  • 【前端】ES13:ES13新特性
  • vuepress 浏览器加载缓存,总是显示旧页面,无法自动刷新数据的解决方法
  • 如何使用代理IP解决反爬虫问题
  • QT学习笔记之绘图
  • 大数据新视界 --大数据大厂之数据清洗工具 OpenRefine 实战:清理与转换数据
  • 基于QT的C++中小项目软件开发架构源码
  • self-supervised, weakly supervised, and supervised respectively区别