ref 和$refs
作用:利用ref 和$refs可以用于获取dom元素,或组件实例
特点:查找范围→当前组件内(更精确稳定,原生的dom在vue子组件中查找最终也会扫描到父组件)
1. 获取dom
-
目标标签–添加
ref
属性<div ref="myChart" class="base-chart-box">子组件</div>
-
恰当时机,通过
this.$
,获取目标标签const myChart = echarts.init(this.$refs.myChart) //获取到dom元素
2.获取组件实例
-
目标组件–添加
ref
属性<BaseForm ref="baseForm"></BaseForm> <!-- 相当于声明子组件中的方法可以给父组件使用 -->
-
恰当时机,通过
this.$
,获取目标组件,就可以调用组件对象里面的方法
var res = this.$refs.baseForm.getValues() //调用子组件中定义的方法