vue3获取子组件真实dom元素和子组件属性方法

智绘前端

已于 2025-02-18 22:18:10 修改

阅读量3k

点赞数 3

分类专栏： Vue全栈开发实战：从工程化到性能调优文章标签： javascript vue.js 前端

于 2023-05-24 17:16:08 首次发布

本文链接：https://blog.csdn.net/moxunjinmu/article/details/130851185

版权

Vue全栈开发实战：从工程化到性能调优专栏收录该内容

34 篇文章

订阅专栏

在Vue3中，当子组件使用setup语法糖时，需通过defineExpose导出属性和方法。父组件利用ref获取子组件实例，访问DOM时，对普通标签使用ref.value，对子组件使用ref.value.$el。文章通过示例展示了这一过程。

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

vue3获取子组件真实dom元素和子组件属性方法

坑点

1.子组件使用setup语法糖时，默认不开启向外导出属性方法需要添加defineExpose方法手动导出
2.vue3中ref在普通标签上获取真实dom元素为divRef.value
3.vue3在自定义子组件上获取真实dom元素方法为childRef.value.$el

父组件

<template>
  <div class="content">
    <test ref="childRef"></test>
    <div ref="divRef"></div>
  </div>
</template>
<script setup>
import test from "./test.vue";
import { ref } from "vue";
const childRef = ref(null);
const divRef= ref(null);
onMounted(() => {
  console.log("childRef", childRef.value);
  console.log("childRef: dom", childRef.value.$el);
  console.log("divRef: dom", divRef.value);
});
</script>

子组件

<template>
  <div class="content">
    {{childValue}}
  </div>
</template>
<script setup>

const childValue = ref('子组件')
defineExpose({
  childValue
})
</script>