javascript - vue.js/vue-router - 创建单个文件组件的实例，并使用要路由到的 props

Question

我的目标是进一步减少代码，我的项目中最明显的目标是抽象列表。目前我有一个名为 List 的 vue 单文件组件，其中包含一个异步数据加载器。我还使用此 List 组件作为根标记元素创建了一堆“派生”单文件组件，根据需要传递 props 来加载正确的数据。

现在，由于我已使用 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，以便我可以创建它的实例并将属性作为构造函数值传递。为什么？我可以只拥有基本 List 并像这样创建组件，而不是拥有 1 个文件夹，每个列表有 4 个文件:

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 对象，该对象具有像我希望的那样定义的属性是。我还尝试使用单文件组件的 vue 内置“extends”选项来扩展 List，但这根本不保存代码，因为我仍然需要为组件定义模板/渲染方法..这又会产生这 4 个文件。我尝试单独或组合使用 Vue.component(..) 和 Vue.extend(..) 但未能成功。

我尝试的任何操作都会导致超出最大堆栈异常(递归出错)、抛出 vue 错误，指出某些内容不适合或根本不显示任何内容。

有办法做到这一点吗？

Answer 1

您可以在 List 组件上定义 prop 来指定列表类型并修改行为。

let routes = [
  {
    path: '/home',
    name: 'home',
    component: List,
    props: { config: { type: 'Listing', display: 'Tile' } }
  },
]