Eine kurze Diskussion über die alternative Methode von $refs in vue2 in der kombinierten API von vue3

<Vorlage>
    <canvas ref="refChart" :height="setHeight"></canvas>
</Vorlage>
<Skript>
importiere { defineComponent, onMounted, ref, inject, watch } von "vue";
Diagramm aus „chart.js“ importieren;
importiere { deepCopy } von "@/helper/index";
exportiere StandarddefiniereKomponente({
    Name: "QtChart",
    Requisiten: {
        Typ: {
            Typ: Zeichenfolge,
            erforderlich: wahr,
            Standard: "Zeile",
        },
        Daten: {
            Typ: Objekt,
            erforderlich: wahr,
            Standard: () => ({}),
        },
        Optionen:
            Typ: Objekt,
            Standard: () => ({}),
        },
        Höhe:
            Typ: Nummer,
            Standard: 0,
        },
        Referenzschlüssel: {
            Typ: Zeichenfolge,
            Standard: null,
        },
    },
    setup(Requisiten) {
        const refChart = ref();
        // Initialisierungsmethode const init = () => {
            const canvasChart = refChart.value?.getContext("2d");
            const chartHelper = neues Diagramm(canvasChart, {
                Typ: Requisitentyp,
                Daten: deepCopy(props.data),
                Optionen: Requisiten.Optionen,
            });
            Uhr(Requisiten, () => {
                chartHelper.data = deepCopy(props.data);
                chartHelper.options = Eigenschaften.options;
                chartHelper.update();
            });
            // Eine Instanz an refChart anhängen
            refChart.value.instance = chartHelper;
        };
        // Höhe festlegen const setHeight = () => {
            zurückkehren {
                Höhe: Requisitenhöhe,
            };
        };
        // Binden Sie eine Instanz und verwenden Sie Inject const bindInstance = () => {
            wenn (Eigenschaften.RefKey) {
                const bind = inject(`bind[${props.refKey}]`);
                if (binden) {
                    binden(refChart.value);
                }
            }
        };
        beimMounted(() => {
            bindInstance();
            init();
        });
        zurückkehren {
            Referenzdiagramm,
            Höhe festlegen,
        };
    },
});
</Skript>

const refChart = ref();

<Vorlage>
    <canvas ref="refChart" :height="setHeight"></canvas>
</Vorlage>
<Skript>
importiere { defineComponent, onMounted, ref, inject, watch } von "vue";
Diagramm aus „chart.js“ importieren;
importiere { deepCopy } von "@/helper/index";
exportiere StandarddefiniereKomponente({
    Name: "QtChart",
    Requisiten: {
        // ... 
    },
    setup(Requisiten) {
        const refChartBox = ref();
        // ...
        zurückkehren {
            refChart:refChartBox,
        };
    },
});
</Skript>

<Vorlage>
    <canvas ref="refChart" :height="setHeight"></canvas>
</Vorlage>
<Skript>
importiere { defineComponent, onMounted, ref, inject, watch } von "vue";
Diagramm aus „chart.js“ importieren;
importiere { deepCopy } von "@/helper/index";
exportiere StandarddefiniereKomponente({
    Name: "QtChart",
    Requisiten: {
        // ... 
    },
    setup(Requisiten) {
        const refChartBox = ref();
        // ...
        zurückkehren {
            refChartBox,
        };
    },
});
</Skript>