Как передать реквизиты дочернему компоненту с Vue Router? - PullRequest
Новая
       3

Как передать реквизиты дочернему компоненту с Vue Router?

0 голосов
/ 14 апреля 2020

У меня есть компонент Vue с навигацией и компоновкой, который использует шину для связи с подкомпонентами. Шина передается как подпорка подкомпонентам, которые затем используют $ emit. 

export default class Dashboard extends Vue {

  protected bus: Vue = new Vue();

  mounted() {
    if (this.bus != null) {
      this.bus.$on("save", () => {
        //
      });
    }
  }
}

@Component({ props: ["bus"] })
export default class Child extends Vue {
   protected bus!: Vue;

   save() {
      this.bus.$emit("save");
   }  
}

В стандартном случае это прекрасно работает.

В случае Vue Маршрутизатор, как я могу внедрить компонент шины из родительского в дочерние?

1 Ответ

1 голос
/ 14 апреля 2020

Вы должны создать экземпляр шины в отдельном файле, который вы можете импортировать в любой другой файл, который должен использовать его, экземпляр будет сохранен во всех местах его импорта.

Вы можете использовать data() объект вместо передачи в качестве реквизита, поскольку он будет действовать как глобальное хранилище, но для этого Vuex . 

// BusDepot.js

import Vue from 'vue'

export const DashboardBus = new Vue({
  data: {
   mySharedValue: 'Its global!'
  }
})

import { DashboardBus } from 'BusDepot'

export default class Dashboard extends Vue {

  created () {

    DashboardBus.$on('save', () => {

      console.log(DashboardBus.mySharedValue)

    });

  }

}

import { DashboardBus } from 'BusDepot'

export default class Child extends Vue {

   save() {
      DashboardBus.$emit('save');
   }  
}

Если вы используете Vuex в качестве центрального хранилища данных для решения проблемы передачи реквизита, вы можете использовать основной экземпляр Vue в качестве шины событий: 

import { DashboardBus } from 'BusDepot'

export default class Dashboard extends Vue {

  created () {
    const vm = this

    vm.$root.$on('dashbaord.save', () => {

      console.log(vm.$store.state.mySharedValue)

    });

  }

}

import { DashboardBus } from 'BusDepot'

export default class Child extends Vue {

   save() {
      this.$root.$emit('dashbaord.save');
   }  
}
...