如何导入同名但路径不同的组件？

Posted 2023-03-13

【中文标题】如何导入同名但路径不同的组件？

【英文标题】：How to import components with the same name but different path?

【发布时间】：2022-01-21 00:14:54

【问题描述】：

我有以下代码，到目前为止一切顺利：

import  Route  from '@vaadin/router';
import './views/object/list-view';
import './main-layout.ts';

export type ViewRoute = Route & 
  title?: string;
  children?: ViewRoute[];
;

export const views: ViewRoute[] = [
  
    path: 'object',
    component: 'list-view',
    title: 'Objects',
  ,
  
    path: 'dashboard',
    component: 'dashboard-view',
    title: 'Dashboard',
    action: async () => 
      await import('./views/dashboard/dashboard-view');
    ,
  ,
];

export const routes: ViewRoute[] = [
  
    path: '',
    component: 'main-layout',
    children: views,
  ,
];

但是当如下添加额外的import './views/object2/list-view';时，它不起作用：

import  Route  from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';

export type ViewRoute = Route & 
  title?: string;
  children?: ViewRoute[];
;

export const views: ViewRoute[] = [
  
    path: 'object',
    component: 'list-view',
    title: 'Object',
  ,
  
    path: 'object2',
    component: 'list-view',
    title: 'Object2',
  ,
  
    path: 'dashboard',
    component: 'dashboard-view',
    title: 'Dashboard',
    action: async () => 
      await import('./views/dashboard/dashboard-view');
    ,
  ,
];

export const routes: ViewRoute[] = [
  
    path: '',
    component: 'main-layout',
    children: views,
  ,
];

我认为它不起作用，因为导入了组件的名称。有没有办法在不更改组件名称的情况下澄清此文件中的差异？

我试过了：

component: './views/object2/list-view'

但还是不行。

在此先感谢女士们先生们。

【问题讨论】：

您还没有解释究竟什么是“不起作用”。从具有相同文件名的两个文件导入没有任何违法行为。告诉我们实际损坏的是什么，然后我们可以为您提供帮助。我建议你在“我认为它不起作用，因为......”这句话之前解释一下。

可以解决导入的名称冲突。 ***.com/questions/39610294/…***.com/questions/40675222/…

@Inigo 使用这个文件，我正在创建路由并渲染组件，因为组件具有相同的名称，所以路由不起作用。

@Avec 将尝试使用此别名选项并通知您

仅当您从每个文件中导入单个项目时，别名选项才有效。但是您还没有告诉我们您要导入的内容（这是我上面的问题）。因为你还没有告诉我们，我不得不在下面的答案中猜测。以后请更具体。

【参考方案1】：

你还没有解释究竟什么是“不起作用”，所以你强迫我猜测。从具有相同文件名的两个文件导入没有任何非法或冲突。重要的是您要导入的每个文件中导出项目的名称。

您的三个导入语句实际上并未导入任何导出

在您的四个导入语句中，只有第一个导入导出的项目Route。其他三个是"side-effect imports" only。

import  Route  from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';

如果您打算从每个文件中导入所有内容

import * as list-view from './views/object/list-view';
import * as list-view2 from './views/object2/list-view';
import * as main-layout from './main-layout.ts';

这会将整个模块导入到单个变量中。然后，您可以通过该变量引用所有单独的导出，例如list-view.model 和 list-view.item。与任何变量一样，请确保它们具有唯一的名称。

导入同名的单个导出

import list-object from './views/object/list-view';
import list-object as list-object2 from './views/object2/list-view';

这仅从每个 list-view 文件中导入 list-object 导出，并将第二个重命名为 list-object2 以在此文件中为其提供唯一名称。

导入具有唯一名称的默认导出：

假设您的 list-view 导入都有默认导出，这就是您想要导入的全部内容。这是导入默认导出的方式：

import list-view from './views/object/list-view'
import list-view2 from './views/object2/list-view'

您可以为默认导出指定任何名称（它们不会以任何名称导出）。让它们独一无二。

【参考方案2】：

我在list-view 组件@customElement('object2-list-view') 上使用@customElement('object-list-view') 做到了这一点

用这个符号我可以阐明组件之间的区别

现在我可以使用了

    path: 'object',
    component: 'object-list-view',
    title: 'Object',
  ,


    path: 'object2',
    component: 'object2-list-view',
    title: 'Object2',
  

非常感谢您的帮助。

【讨论】：

问题是，您没有准确解释您的问题中什么不起作用，现在在您的回答中，不清楚您实际修复的方式和内容，因此这个问题和答案以后不太可能帮助别人，这就是Stack Overflow的目的。

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。