创建一个“混合”两个组件的组件（从 2 个组件扩展）

Posted 2023-02-23

【中文标题】创建一个“混合”两个组件的组件（从 2 个组件扩展）

【英文标题】：Creating a component that is the "mix" of two components (extending from 2 components)

【发布时间】：2018-12-31 11:14:51

【问题描述】：

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

更具体地说，我有一个x-tag 组件，它可以作为一个简单地呈现文本的<span> 或一个也呈现文本并链接到另一个路由的<a>。

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

理想的是只有两个组件：

x-tag，处理基本逻辑的简单文本版本。 x-tag-link-to，链接版本应该是从link-to和x-tag组件扩展而来的组件。

由于您不能从两个组件扩展，我将 x-tag 组件中的逻辑移动到 tag 混合中。所以组件最终是这样的：

x-tag，实现了tag mixin 的组件。 x-tag-link-to，扩展 link-to 组件并实现 tag 混合的组件。

这解决了问题，但是在几个文件中的逻辑令人困惑，而且我还有更多的组件，比如标签，也有一个链接版本，用很多几乎包含整个组件的 mixins 填充 mixins 文件夹逻辑。 感觉不对，或者这是正确的方法？

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

【问题讨论】：

也许代码会有所帮助。但是，请考虑完全不使用 mixins 或扩展来执行此操作！只需使用组合即可。基本上有一个用于 span/a 内部的组件，以及一个带有把手的外部组件（如果将 a 或 span 包裹在它周围）。

Mixins 是解决这类问题的正确方法。另外，我通常将组件的 mixin 放在 conponents 文件夹中，并像 tag-mixin 一样调用它们。对我来说，这似乎更合乎逻辑，因为这样的 mixin 只能添加到组件中。

【参考方案1】：

正如 Gennady Dogaev 在评论中所说，我最终使用了 mixins。

结果是这样的：

mixins/components/x-tag：有标签组件逻辑。 components/x-tag：实现 mixin 的空组件。 components/x-tag-link-to: link-to 组件扩展以实现 mixin。

---

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