第十二节——ref

一、概念

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

二、在dom上使用ref

ref 加在普通的元素上，用this.ref.divRef 获取到的是dom元素

<template>
  <div>
    <div ref="divRef">第一个一个普通的div</div>
    <div ref="divRef2">第二个个普通的div</div>
    <button @click="getRef">按钮</button>
  </div>
</template>
<script>
export default {

  methods: {
    getRef () {
      /**
       * 使用this.$refs
       * 拿到当前组件里所有的ref对象
       */
      console.log(this.$refs)
    }
  }

}

</script>

三、在组件上使用ref

ref 加在子组件上，用this.ref.xxx 获取到的是组件实例，可以使用组件的所有方法

<template>
  <div>
    <QfNum ref="numRef"></QfNum>
    <button @click="add">子组件+1</button>
  </div>
</template>
<script>
import QfNum from './qf-num.vue'
export default {
  components: {
    QfNum,
  },

  methods: {
   
    add () {
      // 可以直接获取到对应的组件状态和方法
      this.$refs.numRef.add()
      console.log(this.$refs.numRef.num)
    }
  },
};
</script>