最新快讯!vue的$refs是什么意思

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

Vue中的$refs

$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。

(资料图片)

描述

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

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

如果用在子组件上，引用就指向组件实例；

另外当v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。【相关推荐：vuejs视频教程、web前端开发】

    Vue            Node
                {{i}}
    
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script type="text/javascript">    Vue.component("layout-div", {      data: function(){          return {            count: 0          }      },      template: `                    {{count}}
                
`    })     var vm = new Vue({        el: "#app",        mounted: function(){            console.log(this.$refs.node); // Node
 // DOM元素            console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组        }    })</script>
登录后复制

因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。

    Vue    
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script type="text/javascript">     var vm = new Vue({        el: "#app",        data: function(){            return {                msg: 0            }        },        template:  `                       {{msg}}
                                           
`,        beforeMount: function(){            console.log(this.$refs.node); // undefined        },        mounted: function(){            console.log(this.$refs.node); // 0
        },        methods: {            updateMsg: function(){                this.msg = 1;                console.log(this.$refs.node.innerHTML); // 0                this.$nextTick(() => {                    console.log(this.$refs.node.innerHTML); // 1                })            }        }    })</script>
登录后复制

VUE中$refs的基本用法

ref 有三种用法：

1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素

2、ref 加在子组件上，用this.$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（）就可以使用了。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

应注意的坑：

1、如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量; 这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））

2、通过 :ref =某变量添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

例子1:

添加ref属性

    这是H1
         
登录后复制

获取注册过 ref 的所有组件或元素

methods: {        getref() {          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件           console.log(this.$refs.h1Ele.innerText);           this.$refs.h1ele.style.color = "red";// 修改html样式           console.log(this.$refs.ho.msg);// 获取组件数据          console.log(this.$refs.ho.test);// 获取组件的方法        }      }
登录后复制

例子2:

Vue代码：

                                                                                                                                                                                    
登录后复制

JS代码：

//点击清空条件，调用该方法emptyAndSearch(){//清空条件方法//清空树选中状态this.clearTreeNodeCheck(["tree"]);//清除排序this.$refs.multipleSelection.clearSort();//设置分页参数this.queryParam = {startRow : 1,                pageSize : 20,                condition:{                }}//分页查询调用this.confirmSearch("statistics");//设置清空条件为falsethis.$store.commit("valueDryGoodDatas/SET_CLEAR_ALL",false);}
登录后复制

例子3:

Vue代码：

                                                                                                                                      {{ $t("查看") }}                        
登录后复制