vue3 統合 API における vue2 の $refs の代替方法についての簡単な説明

<テンプレート>
    <canvas ref="refChart" :height="setHeight"></canvas>
</テンプレート>
<スクリプト>
「vue」から、defineComponent、onMounted、ref、inject、watch } をインポートします。
「chart.js」からチャートをインポートします。
"@/helper/index" から deepCopy をインポートします。
エクスポートデフォルトdefineComponent({
    名前: "QtChart",
    小道具: {
        タイプ： {
            タイプ: 文字列、
            必須: true、
            デフォルト: "line",
        },
        データ： {
            タイプ: オブジェクト、
            必須: true、
            デフォルト: () => ({}),
        },
        オプション:
            タイプ: オブジェクト、
            デフォルト: () => ({}),
        },
        身長：
            タイプ: 数値、
            デフォルト: 0,
        },
        参照キー: {
            タイプ: 文字列、
            デフォルト: null、
        },
    },
    セットアップ(プロパティ) {
        定数refChart = ref();
        // 初期化メソッド const init = () => {
            const canvasChart = refChart.value?.getContext("2d");
            const chartHelper = 新しい Chart(canvasChart, {
                タイプ: props.type、
                データ: deepCopy(props.data)、
                オプション: props.options、
            });
            ウォッチ(props, () => {
                chartHelper.data = deepCopy(props.data);
                chartHelper.options = props.options;
                チャートヘルパーを更新します。
            });
            // インスタンスをrefChartにアタッチする
            refChart.value.instance = chartHelper;
        };
        // 高さを設定する const setHeight = () => {
            戻る {
                高さ: props.height、
            };
        };
        // インスタンスをバインドして inject を使用します const bindInstance = () => {
            （props.refKey）の場合{
                定数bind = inject(`bind[${props.refKey}]`);
                if (バインド) {
                    バインド(refChart.value);
                }
            }
        };
        マウント時(() => {
            バインドインスタンス();
            初期化();
        });
        戻る {
            参照チャート、
            高さを設定する、
        };
    },
});
</スクリプト>

定数refChart = ref();

<テンプレート>
    <canvas ref="refChart" :height="setHeight"></canvas>
</テンプレート>
<スクリプト>
「vue」から、defineComponent、onMounted、ref、inject、watch } をインポートします。
「chart.js」からチャートをインポートします。
"@/helper/index" から deepCopy をインポートします。
エクスポートデフォルトdefineComponent({
    名前: "QtChart",
    小道具: {
        // ... 
    },
    セットアップ(プロパティ) {
        const refChartBox = ref();
        // ...
        戻る {
            refChart:refChartBox、
        };
    },
});
</スクリプト>

<テンプレート>
    <canvas ref="refChart" :height="setHeight"></canvas>
</テンプレート>
<スクリプト>
「vue」から、defineComponent、onMounted、ref、inject、watch } をインポートします。
「chart.js」からチャートをインポートします。
"@/helper/index" から deepCopy をインポートします。
エクスポートデフォルトdefineComponent({
    名前: "QtChart",
    小道具: {
        // ... 
    },
    セットアップ(プロパティ) {
        const refChartBox = ref();
        // ...
        戻る {
            refChartBox、
        };
    },
});
</スクリプト>