如果你有過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
|
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方法的使用，正好在項目中用到，后續將繼續邊學邊推進項目并做好筆記。
到此這篇關于淺談vue2的$refs在vue3組合式API中的替代方法的文章就介紹到這了,更多相關vue3組合式API內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://my.oschina.net/lav/blog/5021229
