如何用Vue路由器将道具传递给子组件？

Question

我有一个带有导航和布局的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路由器的情况下，如何将来自父节点的总线组件注入子节点？

Answer 1

您应该在一个单独的文件中创建一个总线实例，您可以将其导入到任何其他需要使用它的文件中，实例将在导入的所有地方持久存在。

您可以使用data()对象，而不是作为道具传递，因为它将充当全局存储，但这正是维克斯的目的。

// 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');
   }  
}

如果使用维克斯作为中央数据存储来解决道具传递的问题，则可以使用主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');
   }  
}