从子组件更新父组件对象数组的正确方法是什么？

Question

我有一个带有不同选项卡的复杂表单。我vue-router习惯于在这些组件之间切换，并在其中router-view为每个组件显示不同的模块化组件。在这些选项卡中，我的子组件有时带有其他嵌套的子组件。我使用这种event bus方法将数据从这些子组件传递到树中。我这样做是因为最后一个选项卡将是表单的摘要，我需要访问所有表单数据。目前我正在使用类似下面的东西。

例如使用这个结构：

|App

--|Start

--|Question 1

  --|Answer 1

  --|Answer 2

--|Question 2

...

在根组件（App）中：

data() {

  return {

    questions: 0,

    answers: []

  }

},

created() {

    eventBus.$on('answer-added', answer => {

        let answer_exists = false

        this.answers.forEach( (e, i) => {

            if(e.id == answer.answer_id) answer_exists = true

        });

        if(!answer_exists) this.answers.push({

            id: answer.answer_id,

            answer: answer.answer_text

        })

    });

}

每次触发来自孩子的事件时，在 App 组件中创建/更新/删除答案数组的正确方法是什么？我敢肯定，一定有比遍历数组元素更好的方法来检查答案是否已经存在......只是想不通。

Answer 1

你的意思是这样的：if (!this.answers.find(a => a.id === answer.answer_id)) {    this.answers.push(/* ... */);}

Answer 2

将回调从父级传递给子级。现在他们可以自下而上地交流了。孩子可以传递父母可能想要的任何数据，然后父母可以收回控制权并使用其状态或关闭状态。

Answer 3

你所做的或多或少是正确的。无法从循环中逃脱。但是，有些事情您可以改进。相反forEach，您可以使用Array.somemethod。或者，您可以使用Array.find方法：eventBus.$on('answer-added', answer => {    // Instead of using forEach, you can use Array.some() method    const answerExists = this.answers.some((x) => e.id == answer.answer_id);    if (!answerExists) {      this.answers.push({        id: answer.answer_id,        answer: answer.answer_text      });    }});其次，使用事件总线没有问题，但一般用于兄弟或跨组件通信。当所有组件都在同一个祖先或父层次结构中时，使用$emitfor 事件是正确的方法。在您的情况下，即使您有一个嵌套的组件层次结构，随着应用程序的发展，层次结构会变得非常深，您将很快失去对事件总线的典型发布订阅机制的跟踪。即使这意味着从中间组件重新发出相同的事件，您也应该遵循这种做法。