vue的ref属性

最新推荐文章于 2024-06-05 17:23:23 发布

super码力

最新推荐文章于 2024-06-05 17:23:23 发布

阅读量426

点赞数 3

分类专栏： # Vue学习笔记文章标签： javascript vue 前端 vue.js

本文链接：https://blog.csdn.net/m0_61843874/article/details/124414966

版权

Vue学习笔记专栏收录该内容

29 篇文章 4 订阅

订阅专栏

本文探讨了Vue中ref属性与id属性的区别。ref属性用于注册引用信息，当应用于普通HTML元素时，它返回DOM元素；而在组件上使用时，返回的是组件实例。相比之下，id属性在任何标签上都只返回DOM元素。通过示例代码展示了如何使用ref获取元素和组件实例，并在JavaScript中操作。总结了ref的两个主要用途：标记和获取元素或组件实例。

摘要由CSDN通过智能技术生成

🐷id属性

id属性在不同标签上使用都可以得到真实DOM元素

结构代码：

<template>
  <div id="app">
    <h1 id="title">Vue的ref属性</h1>
    <button @click="showDOM" id="btn">点击输出上方的DOM元素</button>
    <!-- 组件标签 -->
    <Student id="student"/>
  </div>
</template>

JavaScript代码：

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

export default {
  name: 'App',
  components: {
   Student
  },
  methods: {
    showDOM(){
    console.log(document.getElementById('title'))
    console.log(document.getElementById('btn'))
    console.log(document.getElementById('student'))
    }
  },
}
</script>

输出效果：

🐷ref属性

在其他标签上使用可获得真实DOM元素，在组件标签上使用可获得组件实例对象

html结构代码：

<template>
  <div id="app">
    <h1 ref="title">Vue的ref属性</h1>
    <button @click="showDOM" ref="btn">点击输出上方的DOM元素</button>
    <!-- 组件标签 -->
    <Student ref="student"/>
  </div>
</template>

JavaScript代码：

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

export default {
  name: 'App',
  components: {
   Student
  },
  methods: {
    showDOM(){
    console.log(this.$refs.title)
    console.log(this.$refs.btn)
    console.log(this.$refs.student)
    }
  },
}
</script>

输出效果：

总结

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 获取：```this.$refs.xxx```