ref和$refs

vue2
140 词

ref 和$refs#

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

  1. 获取 dom:
    1. 目标标签-添加 ref 属性 
      1
      <div ref="chartRef">图表容器</div>
    2. 恰当时机，通过this.$refs.xxx，获取目标标签 
      1
      2
      3
      mounted(){
          console.log(this.$refs.chartRef)
      }
  2. 获取组件：
    1. 目标组件-添加ref属性 
      1
      <BaseForm ref="baseForm"></BaseForm>
    2. 恰当时机，通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法 
      1
      this.$refs.baseForm.组件方法();