Vue.js 3中如何重新初始化子组件？

问题分析与修复方案 #

你的代码存在几个核心问题，导致选择器切换时图表无法重新渲染：

1. 选择器事件错误：使用@click而非@change，只会在点击选择框时触发，而非值变更时。
2. 不必要的事件发射：父组件（chart.vue）无需向子组件发射事件，直接处理值变更并更新数据即可。
3. 子组件未响应props变化：LineChart仅在created钩子渲染一次图表，未监听chartData的变更。
4. 组件继承错误：Vue3中组件只能继承一个父类，插件需通过ChartJS.register注册。

修复后的代码 #

chart.vue

<template>
    <div class="col-12">
        <div class="card">
            <div class="card-header header-elements">
                <div>
                    <h5 class="card-title mb-0">Statistics</h5>
                </div>
                <div class="card-header-elements ms-auto py-0">
                    <!-- 变更为@change事件，触发updateChart方法 -->
                    <select name="status" class="form-select form-select-sm" v-model="chartType" @change="updateChart">
                        <option value="daily" data-label="Days">Last 7 Days</option>
                        <option value="weekly" data-label="Weeks">Weekly</option>
                        <option value="monthly" data-label="Months">Monthly</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <!-- 移除无用的@some-event绑定 -->
                <line-chart :chartData="chartData" :chartOptions="chartOptions" v-if="showLineGraph"></line-chart>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {},
    mounted() {},
    created(){
        this.params.params.chart_type = "daily";
        this.updateXAxisLabel("DAYS");
        this.loadGraph();
    },
    data() {
        return {
            chartType:'daily',
            showLineGraph:false,
            params: {
                params: {}
            },
            datasetSample: {
                data: [],
                label: "",
                borderColor: "#ff5b5c",
                tension: 0.5,
                pointStyle: "circle",
                backgroundColor: "#ff5b5c",
                fill: false,
                pointRadius: 1,
                pointHoverRadius: 5,
                pointHoverBorderWidth: 5,
                pointBorderColor: "transparent",
                pointHoverBorderColor: "#fff",
                pointHoverBackgroundColor: "#ff5b5c",
                height: 500
            },
            chartData: {
                labels: [],
                datasets: []
            },
            chartOptions: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                            scaleLabel: {
                                display: "",
                                labelString: ""
                            },
                            gridLines: {
                                display: true,
                            },
                        }],
                    yAxes: [{
                            beginAtZero: true,
                            scaleLabel: {
                                display: "Amount In INR",
                                labelString: "Amount In INR"
                            },
                            gridLines: {
                                display: true,
                            },
                            ticks: {
                                maxTicksLimit: 10,
                                beginAtZero: false,
                                callback: function (value, index, values) {
                                    return value.toLocaleString();
                                }
                            }
                        }]
                },
                legend: {
                    position: 'top',
                    align: 'start',
                    labels: {
                        usePointStyle: true,
                        padding: 15,
                        boxWidth: 6,
                        boxHeight: 6,
                    }
                },
                plugins: {
                    tooltip: {
                        backgroundColor: "#fff",
                        titleColor: "#000",
                        bodyColor: "#000",
                        borderWidth: 1,
                        borderColor: "#0560e8"
                    }
                }
            }
        };
    },
    methods: {
        updateChart() {
            // 更新请求参数
            this.params.params.chart_type = this.chartType;
            // 更新X轴标签
            const label = this.chartType === 'daily' ? 'DAYS' : this.chartType === 'weekly' ? 'WEEKS' : 'MONTHS';
            this.updateXAxisLabel(label);
            // 重新加载图表数据
            this.loadGraph();
        },
        updateXAxisLabel(label) {
            this.chartOptions.scales.xAxes[0].scaleLabel.display = label;
            this.chartOptions.scales.xAxes[0].scaleLabel.labelString = label;
        },
        loadGraph: function () {
            this.chartData.datasets = [];
            this.chartData.labels = [];
            this.showLineGraph = false; // 加载时隐藏图表

            axios.get(window.location.href + "/get-chart-data", this.params)
                .then(response => {
                    console.log(response.data);
                    if (response.data.status == 200) {
                        let datasets = response.data.data.datasets;
                        let chart_values = [];
                        
                        for (var key in datasets) {
                            if (datasets.hasOwnProperty(key)) {
                                let temp_dataset = Object.assign({}, this.datasetSample);

                                temp_dataset.data = datasets[key].values;
                                temp_dataset.label = key;
                                temp_dataset.borderColor = datasets[key].colour;
                                temp_dataset.backgroundColor = datasets[key].colour;
                                temp_dataset.pointHoverBackgroundColor = datasets[key].colour;

                                chart_values.push(temp_dataset);
                            }
                        }
                        
                        this.chartData.datasets = chart_values;
                        this.chartData.labels = response.data.data.labels;
                    } else {
                        this.chartData.datasets = [];
                        this.chartData.labels = [];
                    }
                    this.showLineGraph = true; // 数据加载完成后显示图表
                })
                .catch(err => {
                    console.log(err);
                    console.log("Chart could not loaded.");
                    this.showLineGraph = true;
                });
        },
    }
}
</script>

line-chart.vue

<script>
import { defineComponent } from 'vue'
import { Chart as ChartJS, Title, Tooltip, Legend, Line } from 'vue3-chart-v2'

// 正确注册ChartJS插件
ChartJS.register(Title, Tooltip, Legend)

export default defineComponent({
  name: 'LineChart',
  extends: Line, // Vue3中仅能继承一个组件
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
  },
  watch: {
    // 深度监听chartData变化，重新渲染图表
    chartData: {
      deep: true,
      handler(newData) {
        this.renderChart(newData, this.chartOptions);
      }
    }
  },
  mounted() {
    // 挂载时首次渲染图表
    this.renderChart(this.chartData, this.chartOptions);
  },
  created(){},
  data(){
    return {};
  }
})
</script>

核心修复点说明 #

1. 选择器事件处理：用@change替代@click，确保值变更时触发数据更新逻辑。
2. 数据更新流程：选择器变更后，更新请求参数、X轴标签，重新调用loadGraph获取新数据。
3. 子组件响应props：添加深度监听器，当chartData变化时重新渲染图表。
4. 插件注册修正：通过ChartJS.register正确注册所需插件，修复组件继承错误。

内容的提问来源于stack exchange，提问作者noushid p