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

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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<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函数结尾作为返回值。

1	const refChart = ref();

需要注意的是，返回值的属性名必须和html中的ref值一致。

下面代码是可以正常执行的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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不一致。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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方法的使用，正好在项目中用到，后续将继续边学边推进项目并做好笔记