If you have experience with vue2 projects, you are familiar with $refs. How do you use $refs in VUe3 due to the cliff-like upgrade to VUe3? Must have encountered similar problems, I also have the same doubts. Learn how to use $refs through search engines and Github. Vue3 uses the composite API function REF instead of applying static or dynamic HTML elements.

Recently, I studied the vue3 project “Crayon management template: vue3 + Vuex4 + Ant Design2” in my spare time. In these two days, I made progress in iteration and realized the chart chart component. When I wrote the article, I found there was an error in the commit of the code.

When using the setup() method of the combined API in Vue3, this.$refs cannot be used normally, but the new function ref() can be used.

The following code is from: github.com/QuintionTan…

<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(); 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(); }); // Attach an instance to refChart refchart.value. instance = chartHelper; }; // setHeight const setHeight = () => {return {height: props. Height,}; }; Const bindInstance = () => {if (props. RefKey) {const bind = inject(' bind[${props. if (bind) { bind(refChart.value); }}}; onMounted(() => { bindInstance(); init(); }); return { refChart, setHeight, }; }}); </script>Copy the code

This code fully implements a Chart component, Chart, which customizes the props property and uses its property values by passing parameters to the setup method. HTML defines a ref=”refChart” as the DOM object for the chart, and a reactive mutable object is defined in the setup method through the ref method as the return value at the end of the setup function.

const refChart = ref();
Copy the code

Note that the attribute name of the returned value must match the ref value in the HTML.

The following code executes normally.

<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>Copy the code

In the following cases, a program error may occur and the desired effect cannot be achieved. There should be a discrepancy between ref=”refChart” defined in HTML and the refChartBox returned by setup.

<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>Copy the code

conclusion

This paper simply introduces the use of ref method, which can be used in the project. In the future, I will continue to learn while promoting the project and take notes.