Vue中的ref和$refs

发布时间 2023-11-11 21:18:01作者: 自学Java笔记本

ref 和 $refs

作用:利用ref$refs 可以用于获取dom元素,或组件实例
特点:查找范围 -> 当前组件内(更精确稳定)

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

使用步骤:

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

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

代码示例:
image

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

通过ref获取组件实例

获取组件:

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

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

image

image

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