Vue3 中通过 ref 访问元素节点与 Vue2 不太一样，vue2中是通过this.$refs的方式获取的。vue3中没有this，是通过声明变量的方式获取ref的。我们来看看代码中是如何实现的吧

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
const message = ref<string>("我是子组件")
const onChange = () => {}
defineExpose({
  message,
  onChange
});
</script>

子组件可以通过defineExpose 方法暴露数据。

父组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
  <child ref="childRef"></child>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import child from "./child.vue";
const childRef = ref<any>(null);
onMounted(() => {
  console.log(childRef.value); // child 组件实例
  console.log(childRef.value.message); // undefined
});
</script>

上段代码中我们给子组件添加了ref属性，为了获取到这个元素，我们声明了一个与 ref 属性名称相同的变量 childRef 。通过childRef.value获取子组件的信息

注意点：

  • 变量名称必须要与 ref 命名的属性名称一致。
  • 通过 childRef.value 的形式获取 DOM 元素。
  • 必须要在 DOM 渲染完成后才可以获取 childRef.value，否则就是 null。