В Vue каков наилучший способ передачи данных от потомка> родителя> вышестоящего родителя?

Question

В Vue каков наилучший способ передачи данных от потомка> родителя> вышестоящего родителя?

Кажется, что emit используется, но следует ли использовать emit для передачи данных от потомка к родителю вышестоящему родителю? Если нет, как лучше?

Если это так, будет ли один и тот же прослушиватель emit, например: @ dataHandler = "data", использоваться у каждого родителя вплоть до верхнего родителя, и должны ли данные явно храниться в каждом родителе до старший родитель?

Любая помощь будет принята с благодарностью.

Answer 1

Я бы порекомендовал создать шину событий.

Это можно сделать следующим образом:

В основном. js добавить

Vue.prototype.$bus = new Vue

В вашем компоненте

this.$bus.$emit('theEventName', data)

Пример шаблона реального мира

<button @click="$bus.$emit('theEventName', data)">Add</button>

Пример реального мира в методах

methods: {
  addItem (data) {
    this.$bus.$emit('theEventName', data);
  }
}

В родительском (или в любом месте приложения) добавьте прослушиватель

beforeCreate () {
  this.$bus.$on('theEventName', this.yourMethod);
}

methods: {
  yourMethod (data) {
    // do your thing
  }
}

Не забудьте удалить слушателя

beforeDestroy(){
  this.$bus.$off('theEventName', this.yourMethod);
}