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 Router，我如何将总线组件从父级注入子级？

Answer 1

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

您可以使用error: copy-fd: read returned: Invalid argument fatal: failed to copy file to 'Project/.git/objects/08/21413bbc766a046ac8f6ad8db7240f85fc4d6f': Invalid argument对象代替传递道具，因为它将充当全局存储，但这就是Vuex的目的。


    from xml.dom import minidom

    document = minidom.parse("beispiel.xml")

    wanted_info = input("Which prduct do you want to see?")

    product_list = document.getElementsByTagName(wanted_info)

    for product in product_list:

        for value in product.childNodes:
            if value.nodeType == minidom.Node.ELEMENT_NODE:
                print(value.tagName + ":" + value.firstChild.data)
        print("\n")

data()

// BusDepot.js

import Vue from 'vue'

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

如果您使用Vuex作为中央数据存储来解决道具传递问题，则可以将主Vue实例用作事件总线：

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 Router将道具传递给子组件？

1 个答案: