（二十四）Vue之ref属性

原创已于 2023-01-06 20:00:19 修改 · 334 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-12-25 15:23:05 首次发布

Vue 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了Vue中ref属性的使用方法及应用场景。通过实例展示了如何利用ref获取DOM元素及组件实例，帮助开发者更好地掌握Vue的DOM操作技巧。

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

文章目录

ref属性
- ref的使用
- 在组件上使用ref

Vue学习目录

上一篇：（二十三）Vue之脚手架的使用

下一篇：（二十五）Vue之props配置项

ref属性

官方解释：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

简单来说是被用来给元素或子组件注册引用信息（id的替代者）
作用：应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象

例如：

	<h1 v-text="msg" id='demo'></h1>
    <button @click="showDOM">点我输出上方的DOM元素</button>

methods:{
    showDOM(){
      console.log(document.getElementById('demo'))
    }
  }

一般来说我们可以使用document.getElementById()，获取上方的DOM元素，但是我们使用的是vue，是用来简化对DOM的操作的，我们亲自去操作DOM，就没有体现出vue的作用，所以要使用ref。

ref的使用

第一步：在需要操作的DOM节点使用ref打标识，标识名称随意

    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM">点我输出上方的DOM元素</button>

第二步：使用$refs.标识名获取改元素的DOM节点

  methods:{
    showDOM(){
      //console.log(document.getElementById('demo'))
      console.log(this.$refs.title)
    }
  }

在这里插入图片描述
请添加图片描述

在组件上使用ref

如果在组件上使用ref，那么输出的是改组件的VueComponent实例对象
组件School：

<template>
  <!--组件的结构，对应html代码-->
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'School',
    data(){
      return {
        name:'一中',
        address:'广州'
      }
    },
    methods: {
      showName(){
        alert(this.name)
      }
    }
  }
</script>

<style>
  /*组件的样式，对应css代码*/
  .demo{
    background-color: aqua;
  }
</style>

打标识

	<h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"/>

使用$refs获取

  methods:{
    showDOM(){
      //console.log(document.getElementById('demo'))
      console.log(this.$refs.title)
      console.log(this.$refs.sch)
    }
  }