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>
相关推荐
charlie1145141914 分钟前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头5 分钟前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd5 分钟前
3种XSS攻击简单案例
前端·xss
盖头盖7 分钟前
【xss基本介绍】
前端·xss
一枚前端小能手14 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖14 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号20 分钟前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组20 分钟前
React JSX 语法讲解
前端·react.js·前端框架
小高00725 分钟前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手27 分钟前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript