Vue3系列——ref属性获取DOM元素或子组件实例

什么是 ref 属性

在Vue3中，我们可以使用ref属性来获取DOM元素或子组件实例。如果用于普通DOM元素，引用将是元素本身；如果用于子组件，引用将是子组件实例，从而调用子组件的方法或访问子组件的数据。

使用方法

子组件通过defineExpose暴露方法和属性

<!-- ChildComponent.vue -->

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
}

// 显示暴露属性和方法：父组件只能拿到子组件中显式暴露出去的属性与方法
// defineExpose函数为宏函数，无需引入，直接使用
defineExpose({ count, increment });
</script>

父组件获取子组件实例，并访问其属性与方法

<!-- ParentComponent.vue -->

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="handleClick">调用子组件</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 引用将存储在与名字匹配的ref里
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);

const handleClick = () => {
  // 调用子组件方法
  childRef.value?.increment();
  // 访问子组件属性
  console.log(childRef.value?.count);
}

onMounted(() => {
  // 组件挂载后可以访问实例
  console.log('子组件实例：', childRef.value);
});
</script>

TypeScript类型支持

1. 定义子组件暴露的类型

// types.ts

export interface ChildComponentExpose {
  count: number
  increment: () => void
}

2. 使用类型

<!-- ParentComponent.vue -->

<template>
  <div>
    <ChildComponent ref="childRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
import type { ChildComponentExpose } from './types';

const childRef = ref<ChildComponentExpose | null>(null);
</script>

最佳实践

1. 命名规范
   • 组件引用建议以Ref结尾：childRef、formRef
   • 语义化命名：modalRef、tableRef
2. 使用时机
   • 在onMounted生命周期后访问
   • 操作前进行空值检查
3. 组件通信方式选择
   • 简单数据传递用props/emit
   • 复杂交互场景使用ref

总结

组件实例ref的主要用途：

• 获取子组件实例
• 调用子组件方法
• 访问子组件数据
• 实现复杂组件交互

完结，撒花~~