Как импортировать несколько файлов vue как один

Question

Другими словами, чтобы избежать множественного импорта в мое приложение vuejs, я создал файл index. js и импортировал все файлы в нем следующим образом:

import AddMember from "./AddMember.vue";
import EditMember from "./EditMember.vue";

export {
  AddMember,
  EditMember,
};

Затем в моем компонентном компоненте я импортировал их так:

import * as Members from "../members/index.js";
export default {
  name: "members-table",
components: {
    AddMember: Members.AddMember
    EditMember: Members.EditMember,
  },
}

Компонент EditMember - это диалоговое окно, которое открывается для каждого элемента, по которому щелкнули мышью. Но каждый раз, когда я щелкаю по члену в таблице, я получаю ошибку, которая выглядит следующим образом: хотя свойство name было определено во всех компонентах.

 Unknown custom element: <edit-member> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Я решил проблему, импортировав EditMember. vue сам файл import EditMember from './EditMember';. Однако мой вопрос: есть ли способ добиться этого? Или еще лучше то, что я упустил или сделал не так.

Answer 1

Что ж, если вы пытаетесь использовать повторно используемые компоненты, не лучше ли создать базовые компоненты? и тогда их не нужно каждый раз импортировать? импортировать {AddMember, EditMember} из "../members/index.js"; это должно работать, как сказал @Asimple

Answer 2

Попробуйте это, вам может потребоваться создать псевдоним как:

components: {
    'AddMember': Members.AddMember, // use single quotes
    'EditMember': Members.EditMember,
},

Answer 3

Может попробовать их отдельно импортировать? Вот так:

import { AddMember, EditMember } from "../members";

Обновление:

Изменен источник импорта, попробуйте. Рабочий пример здесь