Vue3中refs使用方法举例
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
前言
在 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 类似:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < 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 函数中访问它们:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | < 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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue3项目vite.config.js配置代理、端口、打包名以及图片压缩
这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下2023-12-12解决报错ValidationError: Progress Plugin Invalid&
这篇文章主要介绍了解决报错ValidationError: Progress Plugin Invalid Options问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论