從子組件更新父組件的對象數組的正確方法是什么？

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

你所做的或多或少是對的。 無法逃脫循環。 但是，您可以在某些方面進行改進。 代替forEach ，您可以使用Array.some方法。 或者，您可以使用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
      });
    }
});

其次，使用事件總線是沒有問題的，但它一般用於兄弟或跨組件通信。 當所有組件都在同一個祖先或父層次結構中時，使用$emit事件是正確的方法。

在你的情況下，即使你有一個嵌套的組件層次結構，隨着應用程序的發展，層次結構會變得非常深，你很快就會忘記事件總線的典型發布-訂閱機制。 即使這意味着從中間組件重新發出相同的事件，您也應該遵循這種做法。

Answer 3

對於遇到相同問題的任何人，我遇到的問題都可以通過使用Simple Global Store來解決。 正如上面@Dan 所建議的那樣，其他更復雜的場景可能需要Vuex 。

Answer 4

將回調從父級傳遞給子級。 現在他們可以自下而上地進行交流。 孩子可以傳遞父母可能想要的任何數據，然后父母可以收回控制權並使用其狀態或關閉狀態。