第十二节——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>