How to register a single-file reusable component?

Question

Vue.js

Good afternoon, dear colleagues.

I create several single-file components to display data, which are included in the root template through These components are imported into the root component:
<component :is="myComponent"/>

importComponent1 from './components/Component1.vue'
importComponent1 from './components/Component2.vue'
importComponent1 from './components/Component3.vue'

and registered in the `components` object:

export default {
  name: 'App',
  store,
  components: {
    Component1,
    Component2,
    Component3
  },
  data () {
  myComponent: 'Component1'
  }
}

However, one of the components (record editing) is reusable. Depending on the calling context, it displays different information.

From the calling context, I send an event with the information that needs to be passed to the edit component:

this.$emit('editUser, { id: 1, name: 'John Smith', age: 24 })

In the root component, I intercept the event and call the method of dynamically creating the post editing component:

<component :is="myComponent"  v-on:editUser="createEditUser"/>

createEditUser (userInfo) {
  editUser = ... // <- ?
  /* 
    Как динамически создать экземпляр из существующего
     однофайлового компонента, который лежит в папке /components 
     и передать ему userInfo в качестве входных параметров? 
  */
  this.myComponent = editUser
}

Answer 1

All components must be reusable. If your components have a lot of common features, then they can be taken out into an impurity (mixin) or into a service if you are using vue3