vue.js / vue-router - 创建单个文件组件的实例，其中包含要路由到的道具

Question

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

现在，由于我使用 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，但这根本不节省代码，因为我仍然需要为 template/render 定义一个方法组件 .. 再次产生这 4 个文件。我尝试单独和组合使用 Vue.component(..) 和 Vue.extend(..)，但没有成功。

我尝试过的任何方法要么导致最大堆栈超出异常（递归出错），要么抛出 vue 错误，指出某些东西不适合或根本不显示任何东西。

有办法吗？

Answer 1

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

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

vue.js / vue-router - 创建单个文件组件的实例，其中包含要路由到的道具

vue.js / vue-router - create instance of single file component with props to route to

javascript

vue.js

vue-router

vue-component

vuejs2