vue3中标签的 ref 属性

在 Vue 3 中，ref 是一个强大的特性，用于处理组件和 DOM 元素的引用。它有两个主要的应用场景：一是在模板中引用 DOM 元素，二是在 Vue 组件中引用子组件实例。

1. 在模板中使用 ref 引用 DOM 元素

目的：直接访问和操作 DOM 元素。
用法：

在模板中的 DOM 元素上添加 ref 属性：

<template><div ref="myDiv">Hello, World!</div><button @click="changeText">Change Text</button>
</template>

在 setup 函数中访问该元素：

<script setup>
import { ref, onMounted } from 'vue';const myDiv = ref(null);onMounted(() => {if (myDiv.value) {myDiv.value.textContent = 'Text Changed!';}
});function changeText() {if (myDiv.value) {myDiv.value.textContent = 'New Text!';}
}
</script>

说明：

ref=“myDiv” 在模板中为 DOM 元素 div 添加一个引用标识符。
myDiv 是一个响应式的 ref 对象，其 .value 属性包含实际的 DOM 元素。
在 onMounted 钩子中，你可以确保 DOM 元素已经挂载，然后通过 myDiv.value 访问并修改它的内容。

2. 引用子组件实例

目的：访问子组件的方法或属性。
注意：子组件需要暴露一些东西。要让父组件访问子组件的属性或方法

父组件

<template><ChildComponent ref="childRef" /><button @click="callChildGreet">Call Child Greet</button>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const childRef = ref(null);function callChildGreet() {if (childRef.value) {childRef.value.greet();}
}
</script>

子组件

<template><div><p>Child Component</p></div>
</template><script setup>
import { defineExpose } from 'vue';function greet() {console.log('Hello from child!');
}// 使用 defineExpose 暴露方法
defineExpose({greet
});
</script>