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时。这些孩子的数据应该从那里开始是静态的

特定的子代更新触发所有子代的父方法

0 个答案: