如何从路由器的角度发出组件的方法？

Question

我有50个模型，对于所有模型CRUD，我想为每个页面制作工具栏（例如索引，创建，更新，删除等）。

请看这张照片：

我的文件夹结构：

App.vue

<template>
  <div id="app">
    <ul class="nav">
      <router-link to="/posts">Posts</router-link>|
      <router-link to="/products">Products</router-link>|
    </ul>
    <hr>
    <router-view class="content"/>

    <hr>

    <router-view name="toolbar" />

  </div>
</template>

<script>
import Posts from "./views/posts/Index";
import Products from "./views/products/Index";

export default {
  name: "App",
  components: {
    Posts,
    Products
  },
  data() {
    return {
      status: "This is the default status message"
    };
  }
};
</script>

视图/帖子/Index.vue

<template>
    <div class="w-full">
        <div class="card-header">
            <span>test</span>
        </div>
    </div>
</template>

<script>
export default {   
    methods: {
        my_func(type) {
            this.$notification[type]({
                message: "Notification Title",
                description: "This test."
            });
        }
    }
};
</script>

视图/帖子/组件/Toolbar.vue

<template>
    <toolbar>
        <toolbar-section>
            <div class="toolbar-link">
                <button></button>
            </div>
        </toolbar-section>
    </toolbar>
</template>

<script>

export default {
    data() {
        return {
            checked: null
        };
    },

    methods: {
        update: function() {
            this.$emit("my_func");
        }
    }
};
</script>

提琴：https://codesandbox.io/s/trigger-event-views-165yz?fontsize=14

更新

现在，我希望当用户单击“编辑”按钮时，我检查表并找到选定的行，然后重定向到更新页面，如果未选择行，则会发出警报。

Answer 1

您可以为事件创建另一个vue实例。

vueEventManager.js

import Vue from 'vue';

class vueEventManager {
  constructor() {
      this.vue = new Vue;
  }
  trigger(event, data = null) {
      this.vue.$emit(event, data);
  }
  listen(event, callback) {
      this.vue.$on(event, callback);
  }
  off(event, callback) {
      this.vue.$off(event, callback);
  }
  once(event, callback) {
      this.vue.$once(event, callback);
  }
}

export default vueEventManager;

然后您可以将其注册到main.js文件中：

import vueEventManager from './folder/vueeventmanager';
window.Event = new vueEventManager();

现在，您可以在组件中使用它来发出事件。

Event.trigger('eventName', {'valueName': value})

听他们的话

Event.listen('eventName', (value) => {
            //do something
        });