Vue3中的标签 ref 与 defineExpose:模板引用与组件暴露
在Vue3中，ref 和 defineExpose 是两个重要的概念，分别用于模板引用（模板 ref）和组件暴露（组件 API）。
ref 不仅可以用于创建响应式数据，还可以用于获取 DOM 节点或组件实例。通过 ref，我们可以直接访问模板中的元素或组件，并在需要时操作它们。
defineExpose 用于在 <script setup> 语法中显式暴露组件的属性或方法
ref 在模板中有两种主要用途：
❶获取 DOM 节点：
当 ref 用在普通 DOM 标签上时，获取的是 DOM 节点。
❷获取组件实例：
当 ref 用在组件标签上时，获取的是组件实例对象。
1. 模板引用（Template Refs）
在Vue3中，你可以使用 ref 函数在模板中创建一个引用，然后通过这个引用来访问 DOM 元素或子组件实例。这在操作 DOM 或调用子组件的方法时非常有用。
使用 ref 在模板中创建引用
<template>
<div ref="myDiv">这是一个 div</div>
<MyComponent ref="myComponent" />
</template>
<script setup>
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';
const myDiv = ref(null);
const myComponent = ref(null);
onMounted(() => {
console.log(myDiv.value); // 访问 DOM 元素
console.log(myComponent.value); // 访问 MyComponent 实例
});
</script>
2. 组件暴露（Component Exposure）
默认情况下在 Vue3 组件内部的属性和方法是不开放给父组件访问的，可以通过 defineExpose 函数指定哪些属性和方法允许访问
在Vue3中，defineExpose 用于在 <script setup> 中明确指定哪些属性或方法应该被外部访问。这在组合式 API（Composition API）中尤其有用，特别是当你想要从父组件访问子组件的某些属性和方法时。
使用 defineExpose 暴露组件属性或方法
<template>
<div>这是一个子组件</div>
</template>
<script setup>
import { defineExpose } from 'vue';
const myMethod = () => {
console.log('Method called');
};
defineExpose({
myMethod // 暴露 myMethod 方法
});
</script>
结合使用模板引用和组件暴露的示例
假设你有一个父组件和一个子组件，你想从父组件中调用子组件的方法：
父组件
<template>
<ChildComponent ref="childRef" />
</template>
<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref(null);
onMounted(() => {
if (childRef.value) {
childRef.value.myMethod(); // 调用子组件的方法
}
});
</script>
子组件（ChildComponent.vue）
<template>
<div>子组件</div>
</template>
<script setup>
import { defineExpose } from 'vue';
const myMethod = () => {
console.log('子组件方法被调用');
};
defineExpose({ myMethod }); // 暴露 myMethod 方法给父组件调用
</script>
通过这种方式，你可以在Vue3中灵活地使用模板引用和组件暴露来管理 DOM 元素和组件之间的交互。