Vue中的ref和$refs

ref 和 $refs

作用：利用ref 和 $refs 可以用于获取dom元素，或组件实例
特点：查找范围 -> 当前组件内（更精确稳定）

注意:在操作ref获取dom元素时，最快也得是mounted时期获取，也就是页面渲染之后

使用步骤：

• 目标标签-添加ref属性
  <div ref="chartRef">我是div 标签</div>

• 通过 this.$refs.xxx 获取目标标签
  mounted(){ conslo.log(this.$refs.chartRef)}

代码示例：

在上图中都有 ref='box' 但是由于ref的特性，它只会扫描当前组件的ref属性，即右图中只会在右图的容器中去查找，而不会在整个页面去查找。

通过ref获取组件实例

获取组件：

• 目标组件-添加ref属性
  <BaseFrom ref='baseForm'></BaseForm>

• 恰当时机，通过this.refs.xxx获取目标组件就可以调用组件对象里面的方法
  this.$refs.baseForm.组件方法()

可以看到确实调用了组件的方法。