vue3 (四) 通过ref对象传递子组件的方法给父组件调用

飞天代码

于 2022-09-07 00:47:31 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/126736833

vue3 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了在Vue3中如何解决无法直接通过`this.$refs`获取子组件数据的问题。作者提到，相较于Vue2，Vue3需要使用`defineExpose`来暴露子组件的方法。例如，定义一个`getData`方法并使用`defineExpose`导出，然后在父组件中通过`ref`来访问并调用这个方法，如`let data = (panelForm.value as any).getData()`。这为开发者提供了一个适配Vue3新特性的解决方案。

有这么个业务场景，点击保存按钮的时候获取子form的数据，提交后台。
vue2的时候直接this.$refs.formObj.getData()即可。

vue3后这样写就不行了，度娘了下才知道，需要通过defineExpose申明才行。

/**
 * 返回接口操作
 */
const getData= () => {
   return state.domainData;
}
defineExpose({getData});

只有申明后才能调用

 const panelForm = ref(null);
 //获取数据
let data=(panelForm.value as any).getData();