javascript - 我可以从我的 header 触发另一个组件的功能吗？

Question

您好，我有一个关于 vue 路由以及树如何工作的问题。我有我的父路由器，我的路由器 View 和标题位于同一级别。

我有一些功能想要从我的标题触发到我的路由器 View 中名为仪表板的路由

例如:header.vue

<a href="#" @click.prevent="update()"> click me to update dashboard </a>

仪表板.vue

<p> {{datafrom filldata}} </p>

  methods: { 
   fillDataToP() {
    function to fill data
   }
  }

这在vue中可能吗？

Answer 1

您可以在 vuejs 中使用 EventBus 功能。

在你的main.js文件中添加

const EventBus = new Vue()

Vue.prototype.$bus = EventBus;

从您的 header.vue 文件中，您现在可以发出一个事件:

示例 this.$bus.emit('someString', SomeObjectToPass);

然后在您的 Dashboard.vue 上，您可以使用以下方式监听事件:

this.$bus.on('sameStringAsInEmit', () => {

//填充数据

})