创建一个由两个组件“混合”而成的组件(从两个组件扩展)

时间:2018-07-23 23:11:26

标签: javascript ember.js components

我正在构建一组行为可能有所不同的组件。

更具体地说,我有一个x-tag组件,它的行为可以像是<span>,它只是呈现文本,或者是<a>,也可以呈现文本并链接到另一条路线。

对于“链接”部分,我使用的是Ember提供的link component(即link-to),而不是自己重新实现所有路由逻辑。

理想是只有两个组成部分:

  • x-tag,处理基本逻辑的简单文本版本。
  • x-tag-link-to,链接版本,它应该是从link-tox-tag组件扩展的组件。

由于您不能从两个组件扩展,因此我将x-tag组件中的逻辑移到了tag mixin中。因此组件最终如下所示:

  • x-tag,实现tag混合的组件。
  • x-tag-link-to,扩展link-to组件并实现tag混合的组件。

这解决了问题,但在多个文件中使逻辑混乱,我还有很多组件,例如带有链接版本的标记,用很多mixin文件夹填充了mixins文件夹,其中几乎包含了整个组件逻辑。 这感觉不对,或者这是正确的方法吗?

如果需要,我可以提供代码示例。

1 个答案:

答案 0 :(得分:0)

就像Gennady Dogaev在评论中所说的,我最终使用了mixins。

结果是这样的:

  • mixins/components/x-tag:具有标签组件逻辑。
  • components/x-tag:实现混入的空组件。
  • components/x-tag-link-tolink-to组件已扩展以实现mixin。

我抛弃了合成,尽管这似乎是正确的道路,但从长远来看,将内部组件的实现映射到包含组件将是一场噩梦。