【vue】ref和$refs的介绍和使用

在Vue中，ref提供了一种便捷的方式访问DOM元素或子组件实例，减少了直接操作DOM的消耗。ref介绍中说明了它用于注册引用信息，绑定到父组件的$refs对象上，对于DOM元素，引用指向的是元素本身，对于子组件则是实例。this.$refs是一个对象，保存了所有注册了ref的元素和子组件实例，但注意它在初始渲染时不可用，且非响应式。当ref与v-for结合，引用会是一个数组。通过ref实例可以调用子组件的方法。

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

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

ref介绍

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

<p ref="p">Hello</p>
<children ref="children"></children>
	
this.$refs.p
this.$refs.children

this.$refs介绍

this.$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

注意： $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定

当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源
在这里插入图片描述

实例(通过ref特性调用子组件的方法)

子组件：

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  },
  methods: {
    changeMsg() {
      this.msg = '变身'
    }
  }
}
</script>

<style lang="sass" scoped></style>

父组件：

<template>
  <div @click="parentMethod">
    <children ref="children"></children>
  </div>
</template>

<script>
import children from 'components/children.vue'
export default {
  components: { 
    children 
  },
  data() {
    return {}
  },
  methods: {
    parentMethod() {
      this.$refs.children  //返回一个对象
      this.$refs.children.changeMsg() // 调用children的changeMsg方法
    }
  }
}
</script>

<style lang="sass" scoped></style>

父组件：

<template>
    <div>
      <h1 ref="h1text">这是H1</h1>
      <Demo ref="demo"></Demo>
      <button @click="getref">获取H1元素</button>
    </div>
</template>

<script>
  import Demo from './demo'  //引入子组件
    export default {
        name: "index",
      components:{
        Demo  //注册组件
      },
      data(){
          return{

          }
      },
      methods:{
        getref(){
        // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
          console.log(this.$refs.h1text.innerText);
          this.$refs.h1text.style.color = 'red';// 修改html样式
          console.log(this.$refs.demo.msg);// 获取组件数据
          console.log(this.$refs.demo.test());// 获取组件的方法
        }
      }
    }
</script>

<style scoped>

</style>

子组件：

<template>
    <div>
        <h3>我是demo组件</h3>
      <button @click="test">我是demo组件的方法</button>
      <h5>{{msg}}</h5>
    </div>
</template>

<script>
    export default {
        name: "demo",
      data(){
        return{
          msg:'测试'
        }
      },
      methods:{
        test(){
          alert('我是demo组件的弹框')
        }
      }
    }
</script>

<style scoped>

</style>