vue3-setup中如何通过ref调用子组件的函数

vue3-setup中如何通过ref调用子组件的函数

子组件通过defineExpose向外导出需要调用的函数

在父子间中定义ref引用来调用

子组件关键代码:

js 复制代码
<script setup>
import { ref, reactive, defineExpose } from 'vue'

const show = ref(false);
const title = ref('添加收款方式');
const showDialog = (e) => {
  title.value = e;
  show.value = true;
}
// 导出函数
defineExpose({
  showDialog,
})
</script>

父组件关键代码:

js 复制代码
// vue
<DialogPay ref="dialogPay"
               @close="close" />
// js
<script setup>
import { ref } from 'vue';
import DialogPay from '@/views/SpreadManage/DialogPay.vue';

// DialogPay子组件引用
const dialogPay = ref(null);

const withdrawal = () => {
  dialogPay.value.showDialog('编辑收款信息')
}
</script>
相关推荐
蓉妹妹3 分钟前
React项目添加react-quill富文本编辑器,遇到的问题,比如hr标签丢失
前端·react.js·前端框架
码客前端9 分钟前
css图片设为灰色
前端·javascript·css
艾恩小灰灰25 分钟前
CSS中的`transform-style`属性:3D变换的秘密武器
前端·css·3d·css3·html5·web开发·transform-style
Captaincc27 分钟前
AI coding的隐藏王者,悄悄融了2亿美金
前端·后端·ai编程
天天扭码31 分钟前
一分钟解决一道算法题——矩阵置零
前端·算法·面试
抹茶san42 分钟前
el-tabs频繁切换tab引发的数据渲染混淆
前端·vue.js·element
巴巴_羊44 分钟前
JavsScript 原型链
开发语言·javascript·原型模式
Captaincc1 小时前
关于MCP最值得看的一篇:MCP创造者聊MCP的起源、架构优势和未来
前端·mcp
小小小小宇1 小时前
记录老项目Vue 2使用VueUse
前端
vvilkim1 小时前
React Server Components 深度解析:下一代 React 渲染模式
前端·react.js·前端框架