如何将多个 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,
},
}

编辑成员组件是一个对话框，每个单击的成员都会打开。但是每当我单击表上的成员时，我都会得到这样的错误：即使名称 prop 在所有组件中都已定义。

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

好吧，如果它是可重用的组件，那么您尝试这样做不是更好吗？ 然后你不需要每次都导入它们吗？ 从 "../members/index.js";这应该像@Asimple所说的那样工作

Answer 2

也许您可以尝试单独导入它们？ 喜欢这个：

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

更新：

更改了导入源，请尝试一下。 这里的工作示例

Answer 3

试试这个，您可能需要创建别名为：

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