Vue3中refs使用方法举例
作者：JackHuan_code
前言
在 Vue 3 中，refs 的用法与 Vue 2 相比有了一些改进，但基本概念仍然相同：通过 ref 来引用模板中的元素或组件实例，然后在组件的方法或生命周期钩子中通过 this.$refs 来访问这些引用。
然而，在 Vue 3 的 Composition API 中，我们更倾向于使用 ref 函数来创建响应式引用，而不是使用 this.$refs。这种方式使代码更加灵活，并且更易于在组合式函数中使用。
下面我将分别展示 Vue 3 中 Options API 和 Composition API 的 refs 写法。
使用 Options API 选项式
在 Options API 中，refs 的使用与 Vue 2 类似：
<template>
<div ref="myDiv">Hello, Vue 3!</div>
<button ref="myButton" @click="handleClick">Click me</button>
</template>
<script>
export default {
mounted() {
// 通过 this.$refs 访问元素
const myDiv = this.$refs.myDiv;
const myButton = this.$refs.myButton;
console.log(myDiv); // 输出 div DOM 元素
console.log(myButton); // 输出 button DOM 元素
},
methods: {
handleClick() {
const myButton = this.$refs.myButton;
// 在这里可以对 myButton 进行操作
}
}
}
</script>
使用 Composition API 组合式
在 Composition API 中，你会使用 ref 函数来创建响应式引用，并在 setup 函数中访问它们：
<template>
<div ref="myDiv">Hello, Vue 3!</div>
<button @click="handleClick">Click me</button>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
// 使用 ref 函数创建响应式引用
const myDiv = ref(null);
// 生命周期钩子在 Composition API 中通过函数实现
onMounted(() => {
console.log(myDiv.value); // 输出 div DOM 元素
});
// 方法也作为函数返回
const handleClick = () => {
console.log(myDiv.value); // 输出 div DOM 元素
// 在这里可以对 myDiv.value 进行操作
};
// 返回需要在模板中使用的响应式引用和方法
return {
myDiv,
handleClick
};
}
}
</script>
在 Composition API 的例子中，我们使用了 ref 函数来创建一个响应式引用 myDiv，并将其绑定到模板中的 div 元素上。在 setup 函数中，我们可以直接访问 myDiv.value 来获取对应的 DOM 元素。注意，由于 ref 创建的是一个包装对象，因此我们需要通过 .value 来访问或修改其值。
onMounted 是 Vue 3 的 Composition API 提供的一个生命周期钩子，它等价于 Options API 中的 mounted 钩子。在 onMounted 中，我们可以安全地访问 DOM 元素，因为此时组件已经被挂载到 DOM 中了。
最后，setup 函数返回一个对象，其中包含了需要在模板中使用的响应式引用和方法。这样，模板中的 ref 就可以与 setup 中定义的响应式引用关联起来。
总结
到此这篇关于Vue3中refs使用方法的文章就介绍到这了,更多相关Vue3 refs使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！