• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
山东大鲤鱼 显示全部楼层 发表于 2021-10-26 13:13:44 |阅读模式 打印 上一主题 下一主题
如果你有过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. <template>
  2.     <canvas ref="refChart" :height="setHeight"></canvas>
  3. </template>
  4. <script>
  5. import { defineComponent, onMounted, ref, inject, watch } from "vue";
  6. import Chart from "chart.js";
  7. import { deepCopy } from "@/helper/index";
  8. export default defineComponent({
  9.     name: "QtChart",
  10.     props: {
  11.         type: {
  12.             type: String,
  13.             required: true,
  14.             default: "line",
  15.         },
  16.         data: {
  17.             type: Object,
  18.             required: true,
  19.             default: () => ({}),
  20.         },
  21.         options: {
  22.             type: Object,
  23.             default: () => ({}),
  24.         },
  25.         height: {
  26.             type: Number,
  27.             default: 0,
  28.         },
  29.         refKey: {
  30.             type: String,
  31.             default: null,
  32.         },
  33.     },
  34.     setup(props) {
  35.         const refChart = ref();
  36.         // 初始化方法
  37.         const init = () => {
  38.             const canvasChart = refChart.value?.getContext("2d");
  39.             const chartHelper = new Chart(canvasChart, {
  40.                 type: props.type,
  41.                 data: deepCopy(props.data),
  42.                 options: props.options,
  43.             });
  44.             watch(props, () => {
  45.                 chartHelper.data = deepCopy(props.data);
  46.                 chartHelper.options = props.options;
  47.                 chartHelper.update();
  48.             });
  49.             // 附加一个实例给refChart
  50.             refChart.value.instance = chartHelper;
  51.         };
  52.         // 设置高度
  53.         const setHeight = () => {
  54.             return {
  55.                 height: props.height,
  56.             };
  57.         };
  58.         // 绑定一个实例,使用inject注入
  59.         const bindInstance = () => {
  60.             if (props.refKey) {
  61.                 const bind = inject(`bind[${props.refKey}]`);
  62.                 if (bind) {
  63.                     bind(refChart.value);
  64.                 }
  65.             }
  66.         };
  67.         onMounted(() => {
  68.             bindInstance();
  69.             init();
  70.         });
  71.         return {
  72.             refChart,
  73.             setHeight,
  74.         };
  75.     },
  76. });
  77. </script>
复制代码
这段代码完整的实现了一个图表组件Chart,其中自界说了属性props,通过把参数通报给setup方法来使用其属性值。html中界说一个ref="refChart"来作为图表的dom对象,在setup方法中通过方法ref方法来界说响应式可变对象,并在setup函数结尾作为返回值。
  1. const refChart = ref();
复制代码
必要留意的是,返回值的属性名必须和html中的ref值同等。
下面代码是可以正常实行的。
  1. <template>
  2.     <canvas ref="refChart" :height="setHeight"></canvas>
  3. </template>
  4. <script>
  5. import { defineComponent, onMounted, ref, inject, watch } from "vue";
  6. import Chart from "chart.js";
  7. import { deepCopy } from "@/helper/index";
  8. export default defineComponent({
  9.     name: "QtChart",
  10.     props: {
  11.         // ...
  12.     },
  13.     setup(props) {
  14.         const refChartBox = ref();
  15.         // ...
  16.         return {
  17.             refChart:refChartBox,
  18.         };
  19.     },
  20. });
  21. </script>
复制代码
下面的情况,会出现步伐错误,无法到达预期结果。应为html中界说的ref="refChart"和setup返回的refChartBox差别等。
  1. <template>
  2.     <canvas ref="refChart" :height="setHeight"></canvas>
  3. </template>
  4. <script>
  5. import { defineComponent, onMounted, ref, inject, watch } from "vue";
  6. import Chart from "chart.js";
  7. import { deepCopy } from "@/helper/index";
  8. export default defineComponent({
  9.     name: "QtChart",
  10.     props: {
  11.         // ...
  12.     },
  13.     setup(props) {
  14.         const refChartBox = ref();
  15.         // ...
  16.         return {
  17.             refChartBox,
  18.         };
  19.     },
  20. });
  21. </script>
复制代码
结论


本文只是简朴的先容ref方法的使用,正幸亏项目中用到,后续将继续边学边推进项目并做好条记。
到此这篇关于浅谈vue2的$refs在vue3组合式API中的替换方法的文章就先容到这了,更多相关vue3组合式API内容请搜索草根技术分享从前的文章或继续欣赏下面的相关文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作