我有3个vue组件他们都做类似的事情。
它们都输出一个正方形（100px x 100px）div，其中包含一个值，它们是不同的颜色。
组件1（红色）需要2个值并输出一个百分比。
组件2（蓝色）采用浮点值并将其四舍五入到下一个int
组件3（绿色）取3个值并找到平均值。
有没有办法将它组合成一个可重用的组件。他们共享模板并使用类似的方法。
干什么是最好的方法。
答案 0 :(得分：0)
这取决于哪些部分重叠。您可能应该是单独的组件，但如果他们重用相同的模板，他们可以扩展基本组件，或者他们可以使用mixin来共享功能。
这是一个更详细的链接https://alligator.io/vuejs/composing-components/
扩展允许您使用您的扩展程序扩展其他任何组件 组件的选项优先于父组件 组件。这意味着，例如，如果父母和你的 component包含一个created（）钩子，你的组件的created（）钩子 将首先调用，然后调用父代。
Mixins 甚至更酷。它们允许您扩展多个组件 定义。使用mixins，提供可重用的方法很简单 任意数量的组件中的数据。
我应该指出，使用mixins是有争议的。反应社区有一个相当强烈的立场https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750但是在vue中创建HOC有点棘手