Vue $refs 用法

最新推荐文章于 2023-09-24 20:49:18 发布

夜跑者

最新推荐文章于 2023-09-24 20:49:18 发布

阅读量205

点赞数

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/103752464

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

Vue中带$的接口是外部接口。我们通过Vue实例可以进行调用。Vue官方文档有对此的描述：

vm.$refs

类型：Object
只读
详细：

一个对象，持有注册过 ref 特性的所有 DOM 元素和组件实例。

从上面描述可以看出，是个对象，且是只读的。这个对象持有注册过ref特性的所有dom元素或组件实例。这句话的意思就是通过$refs可以访问到dom对象，就像通过getElementById("idName") 获取dom元素一样。

来个例子就清楚了：

<html>
 
<head>
<style type="text/css">

</style>
</head>
 
<body>
   
<script src="./vue.js"></script>
<div id="app">
    <div id="div1Id" ref="div1Ref" style="margin-bottom: 20px">div 1 test</div>
    <button @click="addBorder()">add border for div1</button>
</div>

<script>

const app = new Vue({
    el: "#app",
    methods : {
        addBorder : function(){
            //document.getElementById("div1Id").style.border = "5px solid red";
            console.log("div1 is: " + this.$refs.div1Ref.outerHTML);
            this.$refs.div1Ref.style.border = "5px solid blue";
        }
    }
});

</script>
 
</body>
</html>

如果哪里还有不清楚的地方，可以给我留言，哈哈