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>
相关推荐
你的电影很有趣1 小时前
lesson70:jQuery Ajax完全指南:从基础到4.0新特性及现代替代方案引言:jQuery Ajax的时代价值与演进
javascript·ajax·jquery
2503_928411562 小时前
9.26 数据可视化
前端·javascript·信息可视化·html5
我叫唧唧波2 小时前
【打包工具】webpack基础
前端·webpack
知识分享小能手4 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
Ares-Wang6 小时前
Vue3 》》vite》》TS》》封装 axios ,Promise<T>
vue.js·typescript
PineappleCoder7 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
Min;7 小时前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
EveryPossible8 小时前
展示内容框
前端·javascript·css
伊织code8 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰8 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js