vue.js - 特定子级更新会触发所有子级的父方法

Question

我正在 vue.js 中制作一个应用程序，对用户提供的 Excel 文档进行一些繁重的计算。我需要根据用户提供的一些过滤器检查客户端的有效性。我现在遇到的问题是，由于某种原因，当子组件更新时，父方法calculateModel(modele)在不应该被调用时被调用。由于繁重的计算，这会冻结 UI，并且是不必要的。这主要是由于这些组件的数据绑定到该方法。因此，当孩子更新时，它会为每个孩子回忆方法

我试图用计算属性来做到这一点，但它似乎也不起作用。我的第一个猜测是将数据绑定到一个变量，但问题是这些变量应该动态创建，因为每个文件都有不同数量的车辆和模型

这是我父母的计算模型方法

     calculateModel(modele) {
                console.log('in calculateModel'); // called 20 time on children update when it shoudn't
                let dataModele = [];
                let distance = [];
                let colonneModele = this.documentHeader['12'];

                for (let i = 0; i < this.grid.data.length; i++) {
                    if (this.grid.data[i][colonneModele] === modele) {
                        dataModele.push(this.grid.data[i]);
                        distance.push(this.distance[i])
                    }
                }
                return [dataModele, distance];
            }

这是创建问题的父组件的模板

<div v-for="modele in valueModele" class="row mt-4 w-100 fmt-card">
 <option-personnalise-form v-if="checkifInFilter(modele)" 
   @calculatedRP="onCalculatedRP"
   :options-modele="optionsModele" :year="optionYear"
   :title="modele.name" :data="calculateModel(modele.name)"
   :filter-marque="valueMarque" :documentHeader="documentHeader"
   :allDistance="distance"
   :filter-modele="valueModele">
  </option-personnalise-form>
</div>

这里应用程序应该如何工作。父组件读取文档。在它根据汽车模型将数据分派给每个子组件之后。因此，如果我们有 3 个 Civic 和 5 Accord，它只会将 civic 数据提供给一个孩子，而将 Accord 数据提供给另一个孩子。当 Accord Children 更新时。这些孩子的数据应该是静态的

标签： vue.jsvuejs2