在常规html标签中应用
<div id="test" ref="test">test</div>
console.log(document.getElementById('test'))
console.log(this.$refs.test)
ref与getElement获取到的内容是相同的
在组件中应用
<Test ref="testCom"/>
console.log(this.$refs.testCom)
ref获取到的是组件对象,可以调用该对象下的属性和方法
与v-for组合使用
<ul v-for="item in list" :key="item.name">
<li ref="item">{{item.name}}</li>
</ul>
data() {
return{
list:[
{name: 1},
{name: 2},
{name: 3}
]
}
},
mounted(){
console.log(this.$refs.item)
}
可以看到,输出的是ref所在循环中的所有元素。
官方文档
总结
- ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$ref对象上
- 如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例
- 当v-for用于元素或组件的时候,引用信息奖是包含DOM借点或组件实例的数组