vue中的ref和$refs的使用

最新推荐文章于 2025-05-25 22:40:36 发布

原创最新推荐文章于 2025-05-25 22:40:36 发布 · 747 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中利用$refs特性访问和操作子组件及DOM元素，包括获取DOM元素、访问子组件data、调用子组件方法等实践案例。

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

前言：有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 为子组件赋予一个 ID 引用，类似于html中的id，

ref

ref 被用来给DOM元素或子组件注册引用信息

$refs

$refs是一个对象，持有已注册过ref的所有的子组件

注意：因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问他们，他们还不存在。另外，$refs也不是响应式的，不能用它在模版中做数据绑定

下面一起来看下几种用法：

(1)获取本页面的DOM元素

<template>
<div>
  <h3 ref="getDom">1234</h3>
  <button @click="start">获取DOM</button>
</div>
</template>

<script>
export default {
  methods: {
    start() {
      console.log(this.$refs.getDom)
    }
  },
}
</script>

(2)获取子组件的data

子组件：

//child.vue
<template>
<div>
  {{msg}}
</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  },
}
</script>

父组件：

<template>
<div>
  我是父组件
  <child ref="getRef"></child>
  <button @click="start">点击获取子组件的data</button>
</div>
</template>

<script>
import child from './child/child'
export default {
  components: {
    child
  },
  methods: {
    start() {
      console.log(this.$refs.getRef.msg)
    }
  },
}
</script>

(3)调用子组件的方法

子组件：

//child.vue
<template>
<div>
</div>
</template>

<script>
export default {
  methods: {
    start() {
      console.log('我是子组件的方法')
    }
  },
}
</script>

父组件：

<template>
<div>
  我是父组件
  <child ref="getRef"></child>
  <button @click="toGetMethods">点击获取子组件的方法</button>
</div>
</template>

<script>
import child from './child/child'
export default {
  components: {
    child
  },
  methods: {
    toGetMethods() {
      this.$refs.getRef.start()
    }
  },
}
</script>

（4）子组件调用父组件的方法

子组件：

//child.vue
<template>
<div>
</div>
</template>

<script>
export default {
  methods: {
    open() {
      this.$emit("refresh")
    }
  },
}
</script>

父组件：

<template>
<div>
  <child @refresh="start" ref="getRef"></child>
  <button @click="REF">点击获取子组件的方法</button>
</div>
</template>

<script>
import child from './child/child'
export default {
  components: {
    child
  },
  methods: {
    REF() {
      this.$refs.getRef.open()
    },
    start() {
      console.log('我是父组件的方法')
    }
  },
}
</script>