How to make a modal form component and work with it from different components?

Question

Vue.js

I need to create a modal/popup form that I can access from different components. For example, I need to call a form by clicking a button in the header and by clicking a button in a service - all these are different components of different nesting, and how can I connect them with the modal form components?

Answer 1

Vuex/eventBus.

Answer 2

APP.popup = function (component,props) {
  let mount_poiunt = document.createElement('div');
  document.body.append(mount_poiunt);
  
  var props = {
    'component':component,
    'props':props
  }
  
  var Popup = Vue.extend({
    data: function () {
      return props
    },
    destroyed () {
      this.$el.remove()
    },
    methods: {
      close: function () {
        this.$destroy()
      }
    },
    template: `<div class="popup">
            <span v-on:click="close" class="close">✖</span>
            <component v-bind:is="component" v-on:close="close" v-bind="props"/>
          </div>`
  })
  
  new Popup().$mount(mount_poiunt)
};

Then you just do this in your component method:

APP.popup('имяКомпонентаКоторыйНадоПоказатьВПопапе', {параметрыЭтогоКомпонента});