浅谈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 router安装及使用方法解析
Dec 02 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vuex的使用步骤
Jan 06 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
PHP实现计算器小功能
2020/08/28 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
点球小游戏python脚本
2018/05/22 Python
python基于Selenium的web自动化框架
2019/07/14 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
销售业务员岗位职责
2014/01/29 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
工地标语大全
2014/06/18 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
详解MindSpore自定义模型损失函数
2021/06/30 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript