vue3 $refs
时间: 2023-10-17 11:29:31 浏览: 239
Vue 3中的`$refs`是一个访问组件或DOM元素的引用的方式。你可以在模板中使用`ref`属性来为组件或DOM元素创建一个引用,并通过`$refs`来访问该引用。
在Vue 3中,`$refs`是一个响应式对象,它的值是一个包含了所有引用的对象。你可以通过在组件实例上使用`ref`函数来创建引用,例如:
```vue
<template>
<div>
<my-component ref="myRef"></my-component>
<button @click="logRef">Log Ref</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
mounted() {
console.log(this.$refs); // 输出:{ myRef: VueComponent }
},
methods: {
logRef() {
console.log(this.$refs.myRef); // 输出:VueComponent
}
}
}
</script>
```
在上面的例子中,我们使用`ref`函数来为`my-component`创建了一个引用,并命名为`myRef`。在`mounted`钩子函数中,我们可以通过`this.$refs.myRef`来访问该引用,并将其打印到控制台中。
需要注意的是,只有在组件渲染完成后,才能通过`$refs`访问引用。因此,最好将对`$refs`的访问放在生命周期钩子函数(如`mounted`)或事件处理程序中。
希望这个回答对你有帮助!如有任何问题,请随时提问。
阅读全文