vue 2 의$refs 가 vue 3 조합 식 API 에서 의 대체 방법

vue 2 프로젝트 개발 경험 이 있다 면$refs 에 익숙 할 것 입 니 다.vue 3 의 단애 식 업그레이드 로 vue 3 에서$refs 를 어떻게 사용 합 니까?틀림없이 비슷 한 문제 에 부 딪 힌 적 이 있 을 것 이다.나 도 같은 의혹 이 있다.검색엔진 과 github 을 통 해$refs 를 어떻게 사용 하 는 지 기본적으로 파악 합 니 다.vue 3 에서 정적 또는 동적 html 요 소 를 대체 하기 위해 조합 식 API 의 함수 ref 를 사용 합 니 다.
최근 아마추어 들 은 vue 3 프로젝트'크레용(Crayon)관리 템 플 릿:Vue 3+Vuex 4+Ant Design 2'개발 을 공부 하고 있 으 며,이틀 동안 조금씩 추진 되 어 chart 도표 구성 요 소 를 실현 하 였 으 며,글 을 쓸 때 코드 를 제출 하 는 commt 에 오류 가 있 음 을 발견 하 였 다.

vue 3 에서 조합 식 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 에서 돌아 오 는 refChart Box 와 일치 하지 않 습 니 다.

<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 방법의 사용 을 간단하게 소개 할 뿐 프로젝트 에 마침 사용 되 었 고 나중에 계속 배우 면서 프로젝트 를 추진 하고 필 기 를 할 것 이다.
vue 2 의$refs 가 vue 3 조합 식 API 에서 의 대체 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue 3 조합 식 API 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!