淺談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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- None Found