Vue中的ref 属性

最新推荐文章于 2025-11-19 15:56:37 发布

原创最新推荐文章于 2025-11-19 15:56:37 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue #前端框架

Vue2笔记专栏收录该内容

31 篇文章

订阅专栏

文章介绍了Vue框架中ref属性的用途，它用于注册引用信息，可以是DOM元素或组件实例。在模板中通过`ref`给元素或组件打标，然后在Vue实例的`this.$refs`中可以获取到这些引用。示例代码展示了如何在组件中使用ref并打印对应的DOM元素和组件实例。

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）。

2. 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）.

3. 使用方式

① 打标识

<h1 ref="title"></h1>
<button ref="btn" >点我输出DOM元素</button>
<MySchool ref="sch"/>

②获取

this.$refs.xxx

代码案例如下

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

<script>
  //引入MySchool组件
  import MySchool from './components/MySchool';
  export default {
    name:'App',
    components: { MySchool },
    data(){
      return{msg:'欢迎学习Vue!'
      }
    },
    methods:{
    showDOM(){
      console.log(this.$refs.title);
      console.log(this.$refs.btn);
      console.log(this.$refs.sch);
      }
    }
  }
</script>