javascript - 从另一个组件重新渲染一个组件的正确方法是什么 [Vue.js]

Question

我有选择:

  <select @change="getValuesFromDate($event)">
                        <option value="1">Last 24 hours</option>
                        <option value="7">Last7 days</option>
                        <option value="30">Last 30 days</option>
                        <option>Custom date</option>
                    </select>

和图表组件

                          <graph-component
                                :key="graphKey"
                                v-bind="measurement"
                                :value="valueOfMeasurement(measurement)"
                                :time_date="dateOfMeasurement()"
                            ></graph-component>

函数getValuesFromDate($event)调用API:

   getValuesFromDate(event) {
        let apiLink ="https://api.thingspeak.com/channels/1111111/feeds.json?api_key=XXXXXXXXXXXX&days=" +event.target.value +"&round=2&average=";
        let preferableSize = 0;
        if (event.target.value == 1) {
            preferableSize = 60;
        } else {
            preferableSize = 1440;
        }
        try {
            axios
                .get(apiLink + preferableSize, {
                    withCredentials: false
                })
                .then(response => {
                    this.message = response.data;
                });
            this.graphKey+= 1;
        } catch (error) {}
    }

当我更改选择(并调用此函数)时，我通过更改其键来重新渲染graph-component，并且它工作得很好。什么是更好、更正确的方法来做到这一点，或者这个方法足够好？

Answer 1

@Lube 这是强制重新渲染组件的最佳方法。过去，当我的数据发生变化时，我需要对图形组件执行相同的操作。

我在下面链接了一篇很棒的文章，解释了强制重新渲染的各种方法，但最终最好的方法是向组件添加 :key 属性并更新该键每当您需要重新渲染时。

文章可以找到here .