在Vue中,指向当前组件实例的常用方法有两种:$refs 和 this。$refs 允许我们通过在DOM元素上设置 ref 属性来访问该元素的组件实例。而 this 则是指向Vue组件实例的一个指针。
<template>
<div ref="myDiv">
I am a div.
</div>
</template>
<script>
export default {
created() {
console.log(this.$refs.myDiv) // 输出该元素的组件实例
}
}
</script>
在上面的代码中,我们设置了一个 ref 属性来标识该 div 元素,并通过 this.$refs.myDiv 来访问该元素的组件实例。
除了 $refs 外,Vue还提供了 this,它指向 Vue 组件实例本身,我们可以通过它来访问 Vue组件的各种数据、属性和方法:
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World'
}
},
created() {
console.log(this.message) // 输出 Hello World
}
}
</script>
在上面的代码中,我们通过 this 来访问 Vue 组件实例的 message 数据,并在控制台输出它。