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>

在这个例子中，ChildComponent 通过 defineExpose 暴露了 greet 方法，父组件可以通过 ref 引用调用该方法。