Как регистрировать однофайловый переиспользуемый компонент?

Question

[meridbt]

Добрый день, уважаемые коллеги.

Создаю несколько однофайловых компонентов для отображения данных, которые включаются в корневой шаблон посредством
<component :is="myComponent"/>
Эти компоненты импортируются в корневой компонент:

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

и регистрируются в объекте `components`:

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

Однако один из компонентов (редактирование записи) является переиспользуемым. В зависимости от вызывающего контекста, на нём отображается различная информация.

Из вызывающего контекста я отправляю событие с информацией, которую необходимо передать редактирующему компоненту:

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

В корневом компоненте перехватываю событие и вызываю метод динамического создания компонента редактирования записи:

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

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

Answer 1

[Роман Ямчук]

Все компоненты должны быть переиспользуемыми. Если у ваших компонентов есть много общих признаков, то их можно вынести в примесь (mixin) или в сервис, если вы используете vue3

Comments

[meridbt]

Всё так, общая логика вынесена в миксины, но в основном компоненты сильно отличаются, поэтому их 3 а не 1.
Вопрос в том как синтаксически верно динамически регистрировать компонент, которому необходимо передавать входные параметры.
Можно наверно прямо в методе createEditUser писать всё тело компонента:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Счётчик кликов — {{ count }}</button>'
})

но может есть возможность не засорять код, а использовать однофайловый подход.