Vue ref 属性

最新推荐文章于 2025-10-09 22:03:17 发布

原创最新推荐文章于 2025-10-09 22:03:17 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了Vue中$refs的用法，它用于给元素或子组件注册引用信息，作为ID的替代。在模板中，ref可以应用于HTML元素或组件，获取到的是真实DOM元素或组件实例。例如，在组件中通过`this.$refs`可以访问到注册的引用，展示了一个例子，展示了如何在按钮点击事件中输出DOM元素和组件实例。

ref 被用来给元素或子组件注册引用信息(id的替代者)。

应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象VC
使用方式
- 打标识:
  或想当于 id=“xxx”
- 获取: this.$refs.xxx或 document.getElementById(“xxx”)

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

<script>
  import School from './components/School'

  export default {
    name:'App',
    components:{ School },
    data() {
      return {
        msg:'欢迎学习Vue！'
      }
    },
    methods: {
      showDOM(){
        console.log(this.$refs.title)	// 真实DOM元素
        console.log(this.$refs.btn)		// 真实DOM元素
        console.log(this.$refs.sch)		// School组件的实例对象（vc）
      }
    },
  }
</script>