ref 和 $refs

作用：利用 ref 和 $refs 可以用于 获取 dom 元素，或 组件实例

特点：  查找范围：当前组件内（更精确稳定）

 

语法：

① 获取 dom：

   1. 给目标标签添加上 ref 属性 （<div  ref = " chartRef "> 我是渲染图表的容器 </div>）

   2. 在恰当时机，通过 this.$refs.xxx 来获取目标标签（xxx：标签里 ref 的名字，比如上面的例子，xxx就是 chartRef ）。要获取当前 dom，必须得等当前 dom 渲染出来才行，所以不得早于 mounted

      eg：

      mounted () {

            console.log(this.$refs.chartRef)

      }

 

② 获取组件实例：

   1. 给目标组件添加 ref 属性 ：<BaseForm  ref = "baseForm"> </BaseForm>

   2. 在恰当时机（不得早于mounted），通过 this.$refs.xxx 获取目标组件，就可以 调用组件对象里面的方法（ this.$refs.xxx.方法名() ）