浅谈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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了浅谈Vue CLI 3结合Lerna进行UI框架设计,在此之前先简单介绍一下Element的构建流程，以便对比新的UI框架设计。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了通过vue实现网页截图的功能，有兴趣的童鞋可以了解一下2021-11-11
本文主要介绍了Vue后台管理系统之实现分页功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
Vue OptionsAPI与CompositionAPI的区别与使用介绍
OptionsAPI和CompositionAPI是Vue.js框架中两种不同的组件编写方式,OptionsAPI通过对象字面量定义组件,以属性分隔不同功能,响应式数据通过data属性定义,本文给大家介绍Vue OptionsAPI与CompositionAPI的区别,感兴趣的朋友一起看看吧2024-10-10
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2022-12-12
这篇文章主要介绍了Vue.js的动态组件模板的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)
这篇文章主要介绍了从零搭建一个vite+vue3+ts规范基础项目,本项目已vite开始，所以按照vite官方的命令开始，对vite+vue3+ts项目搭建过程感兴趣的朋友一起看看吧2022-05-05
Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式，本文将通过代码示例给大家详细分析Vue路由History模式2023-06-06
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的，这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下2023-02-02
最新评论