Vue（相似）组件和可重用性

Question

I have a 3 vue components they all do similar stuff.

They all output a square (100px x 100px) div with a value inside it, they are different colours.

• component 1 (red) takes 2 values and outputs a percentage.

• component 2 (blue) takes a float value and rounds it up to the next int

• component 3 (green) takes 3 values and finds the mean.

Is there a way to combine this into one reusable component. They share a template and have similar methods.

What would be the best way to DRY this up a bit.

Answer 1

It depends on what parts are overlapping. You should likely be individual components, but they can extend a base component if they reuse same template, or they could utilise mixins to share functinality.

here is a link that goes into more detail https://alligator.io/vuejs/composing-components/

Extends allow you to extend a single other component, with your component's options taking higher priority over the parent component's. This means, for example, that if both the parent and your component contain a created() hook, your component's created() hook will be called first, then the parent's.

Mixins are even cooler. They allow you to extend multiple component definitions. Using mixins, it's simple to provide reusable methods and data across any number of your components.

I should point out though that the use of mixins is controversial. The react community has a pretty strong stance https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 however creating HOCs in vue is a bit trickier