我的目标是进一步减少代码，我项目中最明显的是抽象列表 . 目前我有一个名为 List 的vue单文件组件，它包含一个异步数据加载器 . 我've also created a bunch of '派生'单个文件组件使用此 List 组件作为根标记元素，根据需要传递道具以加载正确的数据 .
现在，因为我使用this插件将我的组件拆分为单独的文件，所以通常有一个文件夹结构，如下所示：
\components\
\components\List\
\components\List\List.vue
\components\List\List.vue.js
\components\List\List.scoped.vue.css
\components\List\List.vue.html
如您所见，每个组件有4个文件 . 想象一下，有10个不同的列表组件都以 List 为基础 . 这是10个文件夹，共有40个文件 . 为了什么？几乎相同的代码，2-3个值发生变化（属性），其余值保持不变 .
我一直在尝试调整 List ，以便我可以创建它的实例并将属性作为构造函数值传递 . 为什么？而不是每个列表有1个文件夹，每个列表有4个文件，我可以只使用基础 List 并创建组件，如下所示：
let FooList = new List('foo', true, {}, (x) => {});
let BarList = new List('bar', false, {}, (y) => {});
我想在vue-router中使用这些对象，如下所示：
const router = new Router({
...
routes: [
{
path: "some/foo,
component: FooList,
},{
path: "any/bar,
component: BarList,
},
]
});
我试过的任何事都失败了 . 到目前为止我尝试了什么？
export default { ... } 导出默认的单个文件组件 . 我想如果这是一个组件，我可能只是覆盖它中的一些值 .
我是怎么做到这一点的？
我尝试使用 Object.assign({ ... }, List) ，希望创建一个 List 对象，其属性定义为我想要的属性 . 我还尝试使用单个文件组件的"extends"选项中内置的vue来扩展 List ，但这根本不保存代码，因为我仍然需要为组件定义模板/渲染方法..这导致再次出现这4个文件 . 我试图单独和组合使用 Vue.component(..) 和 Vue.extend(..) ，但无法成功 .
我试过的任何事情导致最大堆栈超出异常（递归出错），抛出vue错误，说明某些东西不适合或根本没有显示任何东西 .
有办法做到这一点吗？
1 回答
您可以在
List组件上定义prop以指定列表类型并修改行为 .