Как получить метод компонента из роутера-просмотра?

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