Vue3快速上手（十一）标签里的ref属性

最新推荐文章于 2025-07-14 00:11:30 发布

原创最新推荐文章于 2025-07-14 00:11:30 发布 · 3.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue3 #ref #label-ref #标签里的ref

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue中ref属性在HTML元素和子组件上的应用，以及如何让子组件的数据在父组件中可访问。重点讲解了默认情况下子组件数据的保护机制和如何通过`defineExpose`暴露部分数据给父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、介绍

标签里的ref，可以在普通html元素标签上，也可以用在vue组件标签上。用在html元素标签上时，返回的是该html元素的DOM；用在vue组件标签上时，返回的是该子组件（也就是当前vue是父组件）暴露给父组件的对象，暴露哪些，在返回的对象里就包含哪些，不暴露不包含。

二、实例

2.1 作用在普通html标签上

示例代码：

<template>
    <div class="person">
        <h2>标签ref</h2>
        <h3 ref="refName">姓名：{{ person.name }}</h3>
        <h3>年龄：{{ person.age }}</h3>
        <button @click="getRef">获取ref标签内容</button>
    </div>
</template>
<script lang='ts' setup name="LableRef">
import { reactive, ref } from 'vue'
let person = reactive(
    {
        name: "李四",
        age: 99,
        bmi: {
            high: 173,
            weight: 82
        }
    }
)
let refName = ref()
function getRef() {
    console.log('refName--> ', refName.value);
}
</script>

示例效果：
在这里插入图片描述

2.2 作用在vue组件标签上

示例代码：
父组件：person.vue

<template>
    <div class="person">
        <h2>标签ref</h2>
        <h3 ref="refName">姓名：{{ person.name }}</h3>
        <h3>年龄：{{ person.age }}</h3>
        <hr>
        <h2>ref子组件：LableRefSon</h2>
        <LableRefSon ref="refSon"></LableRefSon>
        <button @click="getRef">获取ref标签内容</button>
    </div>
</template>
<script lang='ts' setup name="LableRef">
import { reactive, ref } from 'vue'
import LableRefSon from './lableRefSon.vue';

let person = reactive(
    {
        name: "李四",
        age: 99,
        bmi: {
            high: 173,
            weight: 82
        }
    }
)

let refName = ref()
let refSon = ref()

function getRef() {
    console.log('refName--> ', refName.value);
    console.log('refSon--> ', refSon.value);
}
</script>

子组件：son.vue

<template>
    <div class="person">
        <h2>标签ref-Son</h2>
        <h3>姓名：{{ son.name }}</h3>
        <h3>年龄：{{ son.age }}</h3>
        <h3>恋爱日记：{{ sonDiary }}</h3>
    </div>
</template>
<script lang='ts' setup name="LableRefSon">
import { reactive, ref } from 'vue'
let son = reactive(
    {
        name: "李儿子",
        age: 18,
    }
)
// 儿子日记
let sonDiary = ref('恋爱日记:今天我.....')
</script>

在这里插入图片描述

☆ 从上图可以看到，默认情况下，如果只是在子组件上加上ref属性的话，输出的对象里是没有任何数据的。这个是vue3对子组件数据的一种保护。需要子组件主动暴露数据才可以获取。

那么需要子组件做如下修改：将需要暴露给父组件的数据，暴露一下defineExpose({sonDiary})

<template>
    <div class="person">
        <h2>标签ref-Son</h2>
        <h3>姓名：{{ son.name }}</h3>
        <h3>年龄：{{ son.age }}</h3>
        <h3>恋爱日记：{{ sonDiary }}</h3>
    </div>
</template>
<script lang='ts' setup name="LableRefSon">
import { reactive, ref, defineExpose } from 'vue'
let son = reactive(
    {
        name: "李儿子",
        age: 18,
    }
)
// 儿子日记
let sonDiary = ref('恋爱日记:今天我.....')
// 将日记暴露给父级，个人信息不暴露
defineExpose({sonDiary})
</script>