Vue Vue项目里面使用的$refs与$ref是什么意思，有什么用？

最新推荐文章于 2024-08-04 11:10:34 发布

Silly夏

最新推荐文章于 2024-08-04 11:10:34 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Sillydreamboy/article/details/118530804

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue中$refs和ref的概念，它们用于方便地引用子组件或HTML元素。$refs是一个对象，存储了所有带有ref属性的子组件或元素。通过ref，可以直接访问子组件的data和methods，避免了使用DOM操作。$refs的使用可以降低对DOM节点的操作，提高性能。

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

$refs与ref是什么

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
使用：在 HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods

<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加<button>
</div>
复制代码
<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>

因为在原生里获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
- 调用方式：this.$refs.input1
- 作用：减少DOM节点的消耗