浅谈vue2的$refs在vue3组合式API中的替代方法
如果你有过vue2的项目开发经验,那么对$refs就很熟悉了。由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑。通过搜索引擎和github,基本掌握如何使用$refs。在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用。
最近业余在学习vue3项目《蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2》开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的commit有错别字。
在vue3中使用组合式API的setup()方法的时候,无法正常使用this.$refs,但可以使用新的函数ref()。
下面代码摘自:https://github.com/QuintionTang/crayon/blob/feat-dashboard/src/qtui/components/Chart.vue
<template> <canvas ref="refChart" :height="setHeight"></canvas> </template> <script> import { defineComponent, onMounted, ref, inject, watch } from "vue"; import Chart from "chart.js"; import { deepCopy } from "@/helper/index"; export default defineComponent({ name: "QtChart", props: { type: { type: String, required: true, default: "line", }, data: { type: Object, required: true, default: () => ({}), }, options: { type: Object, default: () => ({}), }, height: { type: Number, default: 0, }, refKey: { type: String, default: null, }, }, setup(props) { const refChart = ref(); // 初始化方法 const init = () => { const canvasChart = refChart.value?.getContext("2d"); const chartHelper = new Chart(canvasChart, { type: props.type, data: deepCopy(props.data), options: props.options, }); watch(props, () => { chartHelper.data = deepCopy(props.data); chartHelper.options = props.options; chartHelper.update(); }); // 附加一个实例给refChart refChart.value.instance = chartHelper; }; // 设置高度 const setHeight = () => { return { height: props.height, }; }; // 绑定一个实例,使用inject注入 const bindInstance = () => { if (props.refKey) { const bind = inject(`bind[${props.refKey}]`); if (bind) { bind(refChart.value); } } }; onMounted(() => { bindInstance(); init(); }); return { refChart, setHeight, }; }, }); </script>
这段代码完整的实现了一个图表组件Chart,其中自定义了属性props,通过把参数传递给setup方法来使用其属性值。html中定义一个ref="refChart"来作为图表的dom对象,在setup方法中通过方法ref方法来定义响应式可变对象,并在setup函数结尾作为返回值。
const refChart = ref();
需要注意的是,返回值的属性名必须和html中的ref值一致。
下面代码是可以正常执行的。
<template> <canvas ref="refChart" :height="setHeight"></canvas> </template> <script> import { defineComponent, onMounted, ref, inject, watch } from "vue"; import Chart from "chart.js"; import { deepCopy } from "@/helper/index"; export default defineComponent({ name: "QtChart", props: { // ... }, setup(props) { const refChartBox = ref(); // ... return { refChart:refChartBox, }; }, }); </script>
下面的情况,会出现程序错误,无法达到预期效果。应为html中定义的ref="refChart"和setup返回的refChartBox不一致。
<template> <canvas ref="refChart" :height="setHeight"></canvas> </template> <script> import { defineComponent, onMounted, ref, inject, watch } from "vue"; import Chart from "chart.js"; import { deepCopy } from "@/helper/index"; export default defineComponent({ name: "QtChart", props: { // ... }, setup(props) { const refChartBox = ref(); // ... return { refChartBox, }; }, }); </script>
结论
本文只是简单的介绍ref方法的使用,正好在项目中用到,后续将继续边学边推进项目并做好笔记。
到此这篇关于浅谈vue2的$refs在vue3组合式API中的替代方法的文章就介绍到这了,更多相关vue3组合式API内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要帮助大家理解JavaScript中worker事件api,对worker事件api有一个深刻了解,感兴趣的小伙伴们可以参考一下...2015-12-27
- 这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...2020-11-24
- 在日常开发中,总会接触到各种接口,前后端数据传输接口,第三方业务平台接口,下面这篇文章主要给大家介绍了关于如何设计一个安全的API接口的相关资料,需要的朋友可以参考下...2021-08-12
C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法
这篇文章主要介绍了C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法,结合实例形式分析了GetDesktopWindow函数用于获取窗口句柄的具体使用方法与相关注意事项,需要的朋友可以参考下...2020-06-25- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了vue设置全局访问接口API地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了Vue常用API、高级API的相关总结,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-04
Swift 中如何使用 Option Pattern 改善可选项的 API 设计
这篇文章主要介绍了Swift 中如何使用 Option Pattern 改善可选项的 API 设计,帮助大家更好的进行ios开发,感兴趣的朋友可以了解下...2020-10-23微信小程序 wx.request(object) API详解及实例代码
这篇文章主要介绍了微信小程序 wx.request(object) API详解及实例代码的相关资料,需要的朋友可以参考下...2016-10-02- 这篇文章主要介绍了uni-app 常用API,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-20
- ASP.NET Web API具有与ASP.NET MVC类似的编程方式,ASP.NET Web API不仅仅具有一个完全独立的消息处理管道,而且这个管道比为ASP.NET MVC设计的管道更为复杂,功能也更为强大。下面创建一个简单的Web API项目,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了微信小程序 Image API实例详解的相关资料,需要的朋友可以参考下...2016-10-02
- 这篇文章主要介绍了c# webapi 配置swagger的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-09
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要介绍了C# WebApi 接口传参详解,本篇打算通过get、post、put、delete四种请求方式分别谈谈基础类型(包括int/string/datetime等)、实体、数组等类型的参数如何传递。感兴趣的小伙伴们可以参考一下...2020-06-25