ref 主要用于注册模板引用。

• 用在普通的原生 html 标签上，获取的是DOM节点。
• 用在组件标签上，获取的是组件实例对象。

需要注意生命周期, setup 钩子里无法访问这个值。

用在普通DOM标签上：

<template>
  <div class="person">
    <h1 ref="title1">尚硅谷</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <button @click="viewRef">查看 ref</button>
  </div>
</template>

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

let title1 = ref();
let title2 = ref();
let title3 = ref();
// 通过ref获取元素
function viewRef() {
  console.log(title1.value);
  console.log(title2.value);
  console.log(title3.value);
}
</script>

用在组件标签上：

App.vue

<template>
  <person ref="ren"></person>
  <button @click="viewRen">查看 ren</button>
</template>
<script lang="ts" setup>
import { defineOptions, ref } from "vue";
import Person from "./components/Person.vue";
defineOptions({ name: "App" });
const ren = ref();
function viewRen() {
  // 需要注意生命周期，组件此时还没创建，ref 无法在 setup 钩子里执行。
  console.log(ren.value);
}
</script>

Person.vue

<template></template>
<script lang="ts" setup>
import { ref, defineExpose } from "vue";
defineOptions({ name: "person" });
const age = ref(1);
const name = ref("kangkang");
//  主动对外暴露 age 和 name
defineExpose({ age, name });
</script>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24