记录vue3子组件ref读取不到问题

闲鱼_JavaScript

于 2022-07-25 17:34:03 发布

阅读量1.1w

点赞数 14

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_47436633/article/details/125979628

vue3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue 3的<scriptsetup>模式下，如何通过defineExpose暴露子组件方法以便外部访问，并解决了父组件通过ref获取子组件实例的问题。实例演示了如何在子组件中定义并导出resetFields方法，以及在父组件中正确使用ref获取实例并调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题介绍

我子组件是使用的 < script setup >模式，然后在父组件去使用ref获取子组件，获取出来的值为空代理。理想情况是获取到整个子组件实例。但是失败了。

解决方案

< script setup >模式子组件必须使用 defineExpose 暴露出你需要让外部访问的方法或参数
例如：
子组件

<template>
  <el-drawer>
  </el-drawer>
</template>
<script setup>
const resetFields = () => {
  // 业务代码
};
defineExpose({
  resetFields
});
</script>

父组件

<template>
  <div class="goods-info flex-column">
    <LhDrawer
      ref="lhDra"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const lhDra = ref(null);

onMounted(() => {
  console.log(lhDrawer, 'ref-data');
});
</script>