vue中的ref和refs的使用

最新推荐文章于 2025-07-22 21:43:49 发布

原创最新推荐文章于 2025-07-22 21:43:49 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细探讨了Vue.js中ref和refs的使用，包括它们的区别和应用场景。ref主要用于在父组件中获取子组件实例或DOM元素，当应用于普通DOM元素时，引用指向的是该元素；而在子组件上，它则指向组件实例。通过$refs，开发者可以方便地对元素或子组件进行操作和交互。

ref和refs的区别:

ref用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上,

如果是在普通的DOM元素上使用,引用指向的就是DOM元素;

如果是在子组件里,引用就指向组件实例

$refs可以用来选择元素或子组件

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="myapp">
        <button @click='changeBtn'>改变</button>
        <!-- 通过ref注册元素或子组件标签 -->
        <div ref='mydiv'>标签name</div>
    </div>
</body>

</html>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#myapp',
        data: {},
        methods: {
            changeBtn() { //触发点击事件
                // this.$refs.mydiv.style.width = '100px';
                this.$refs['mydiv'].style.width = '100px'; //和上面是等价的
                this.$refs.mydiv.style.height = '100px'
                this.$refs.mydiv.style.backgroundColor = 'red';
                // .和[]的区别 都可以指向变量,在循环里[]用的多
                var obj = {
                    name: 'oo',
                    age: 18
                }
                var obj2 = {}
                for (var k in obj) {
                    //k代表的是属性名  nanme,age
                    //  obj2.name='m';
                    //  obj2.age=19;
                    obj2[k] = obj[k] //与前面两步是等价的
                }
            }
        },
    })
</script>