浅谈vue2的$refs在vue3组合式API中的替代方法


Posted in Vue.js onApril 18, 2021

如果你有过vue2的项目开发经验,那么对$refs就很熟悉了。由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑。通过搜索引擎和github,基本掌握如何使用$refs。在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用。

最近业余在学习vue3项目《蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2》开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的commit有错别字。

浅谈vue2的$refs在vue3组合式API中的替代方法

在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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
You might like
laravel安装zend opcache加速器教程
2015/03/02 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python属性和内建属性实例解析
2020/01/14 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
C#面试问题
2016/07/29 面试题
超市5.1促销活动
2014/01/15 职场文书
支行行长竞聘报告
2014/11/06 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
导游词之吉林花园山
2019/10/17 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python