Vue中的ref 和$refs的使用

ref 和$refs

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

特点：查找范围→当前组件内（更精确稳定，原生的dom在vue子组件中查找最终也会扫描到父组件）

1. 获取dom

1. 目标标签–添加ref 属性

     <div ref="myChart" class="base-chart-box">子组件</div>
   

2. 恰当时机，通过this.$refs.xxx，获取目标标签

    const myChart = echarts.init(this.$refs.myChart)  //获取到dom元素
   

2.获取组件实例

1. 目标组件–添加ref属性

   <BaseForm ref="baseForm"></BaseForm>     <!-- 相当于声明子组件中的方法可以给父组件使用 -->
   

2. 恰当时机,通过this.$refs.xxx，获取目标组件，

   就可以调用组件对象里面的方法

   var res = this.$refs.baseForm.getValues()  //调用子组件中定义的方法