一、概念
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册
二、在dom上使用ref
ref 加在普通的元素上，用this.ref.divRef 获取到的是dom元素文章来源：https://www.toymoban.com/news/detail-728600.html
<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 获取到的是组件实例，可以使用组件的所有方法文章来源地址https://www.toymoban.com/news/detail-728600.html
<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>到了这里，关于第十二节——ref的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
