Vue中的ref和$refs

最新推荐文章于 2025-05-24 23:29:23 发布

willard_cui

最新推荐文章于 2025-05-24 23:29:23 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习笔记前端

本文链接：https://blog.youkuaiyun.com/willard_cui/article/details/82390973

前端同时被 2 个专栏收录

43 篇文章

订阅专栏

vue学习笔记

14 篇文章

订阅专栏

本文详细介绍了Vue中ref和$refs的使用方法及应用场景。包括如何在DOM元素和子组件上使用ref来获取引用，并通过案例展示了如何利用ref实现组件间的通信，如求和功能。

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

Vue中的ref和$refs

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

例如

在DOM上使用ref
 <div id="root">        
        <div ref="hello" @click="handleClick">调用DOM元素</div>
    </div>
 <script>        
        var vm=new Vue({
            el: "#root",
            methods: {
                handleClick: function(){
                    console.log(this.$refs.hello)
                }
            }
        })
 </script>

结果：引用指向该DOM元素

在自组件上使用ref
<div id="root">        
        <item ref="hello"></item>
    </div>
    <script>
        Vue.component('item',{
            data: function () {
                    return {
                         msg: "hello world"
                    }
            },
            template: '<div @click="handleClick">{{msg}}</div>',
            methods:{
                handleClick:function () {
                    console.log(vm.$refs.hello)
                }
            }
        })
        var vm=new Vue({
            el: "#root"            
        })
    </script>

结果：引用指向子组件实例

：

案例：使用vue的ref实现求和。通过ref获得两个子组件的number并求和，将和赋值给父组件的total

<div id="root">       
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        Vue.component('counter',{
            data: function () {
                    return {
                         number: 0
                    }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick:function () {
                    this.number++;
                    this.$emit("change")
                }
            }
        })
        var vm=new Vue({
            el: "#root",
            data:{
                total:0
            },
            methods: {
                handleChange: function(){
                   this.total=this.$refs.one.number+this.$refs.two.number
                }
            }
        })
    </script>

结果：