vue ref与this.$refs 使用

Vue的ref与$refs
ref-注册； $refs 引用

ref

用于注册引用信息，引用信息会注册在使用的元素或对象上

• 1、用于组件

<search ref="search" :conditions="searchOptions" @click="doSearch" style="width:70%;"/>

• 2、用于页面DOM元素

<el-table :data="tableData" border ref="table">
el-table>

但值得注意的是：
因为 ref 本身是作为你渲染结果被创建的，在初始渲染的时候不能访问它们;

$refs

$refs 是所有注册过 ref 的集合（对象）；若是遍历的ref，则对应$refs是个数组集合

打印 this.$refs 显示此页面注册的ref集合，一个组件，一个DOM元素

1、$refs 使用

• 可以用$refs访问组件中的属性以及方法，**

this.$refs.search.doClear();    // 访问组件方法

console.log(this.$refs.search.conditions);    // 访问组件属性

但值得注意的是：

• $ refs不是响应式的，只在组件渲染完成之后才填充。所以想要获取DOM数据的更新要使用 this.$nextTick()

$refs里对应项就是组件中对应定义的方法，同时组件中仍可有 $refs

2、DOM元素中对应的是元素的方法和携带的值