当前位置：首页 > article >正文

Vue - 标签中 ref 属性的使用

article 2025/2/1 10:26:32

在 Vue 3 中，ref 属性用于在模板中引用 DOM 元素或组件实例。通过 ref，可以直接访问这些元素或组件的实例，从而进行更复杂的操作，比如获取元素的尺寸、调用组件的方法等。

基本语法：

<template>
  <div ref="myElement">Hello, Vue 3!</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const myElement = ref(null);

onMounted(() => {
  // 访问 DOM 元素
  console.log(myElement.value); // 输出 DOM 元素
});
</script>

详细说明:

ref 属性：在模板中，使用 ref 属性为元素或组件指定一个引用名称。这个名称可以是任何有效的 JavaScript 标识符。
ref 函数：在 <script setup> 中，使用 ref 函数来创建一个响应式引用。初始值通常设置为 null，因为在组件挂载之前，引用的 DOM 元素尚不存在。
访问引用：在 onMounted 生命周期钩子中，可以通过 myElement.value 访问到 DOM 元素或组件实例。

访问组件实例：

ref 也可以用于访问子组件的实例。假设有一个子组件 ChildComponent，可以这样使用 ref：

<template>

  <ChildComponent ref="child" />

  <button @click="callChildMethod">Call Child Method</button>

</template>

<script setup>

import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const child = ref(null);

const callChildMethod = () => {

  // 调用子组件的方法
  if (child.value) {

    child.value.someMethod();

  }
};
</script>

在这个示例中，child 引用指向 ChildComponent 的实例，可以通过 child.value 访问并调用子组件的方法。

注意事项

响应式：ref 创建的引用是响应式的，但引用本身（如 myElement）并不是响应式的。需要通过 .value 来访问和修改引用的值。
生命周期：在组件的 mounted 钩子中，引用的 DOM 元素或组件实例才会被创建，因此在此之前访问它们会得到 null。
类型检查：在 TypeScript 中，使用 ref 时可以指定类型，以便获得更好的类型检查和自动补全。

与defineExpose 的结合：

defineExpose 是 Vue 3 中在 <script setup> 中使用的一个函数，用于定义要暴露给父组件的属性和方法。通过这个函数，可以让父组件访问子组件的内部状态和行为。

1. 创建子组件

<!-- 子组件：ChildComponent.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <p>Message: {
  
  { message }}</p>
    <button @click="increment ">我要被输出了</button>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue';

// 定义一个响应式变量
const message = ref('我是子组件!');

// 定义一个方法
const increment = () => {
  message.value += '~';
};

// 使用 defineExpose 暴露变量和方法
defineExpose({
  message,
  increment ,
});
</script>

<style scoped>
</style>

在上面的代码中，创建了一个子组件 ChildComponent，其中包含一个响应式变量 message 和一个 increment方法。通过 defineExpose，将这两个对象暴露给父组件。

2. 使用子组件

<!-- 父组件：ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent ref="child" />
    <button @click="showChildMessage">显示子组件信息</button>
    <button @click="modifyChild">修改子组件信息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const child = ref(null);

// 获取子组件中的 message
const showChildMessage = () => {

  if (child.value) {

    alert(child.value.message); // 访问暴露的 message

  }
};

// 调用子组件的 increment 方法
const modifyChild = () => {

  if (child.value) {

    child.value.increment (); // 调用暴露的 increment 方法

  }
};
</script>

<style scoped>
</style>

在父组件中，使用 ref 属性获取子组件的实例。当用户点击“显示子组件信息”按钮时，父组件会弹出子组件中的 message 值；而点击“修改子组件信息”时，父组件会调用子组件的 increment 方法，将 message 更新。