How to understand that you need to separate the component into new components (vue)?

Question

Vue.js

For example, there is a Button component and I need to somehow style it so that it becomes large, but I shouldn’t create a new BigButton component and use Button in it? And it would seem more logical to just specify something like size="big" as a prop and either tweak the styles in the Button, or do whatever else is required.

That is, in my understanding, does it make sense to create another component (BigButton) using the existing one (Button) when we only need to add some js functionality to it? Although here you can essentially use the same approach with props, and here the moment is still a little unclear, but when to create a new component, and when to just add different logic to the current one, depending on the incoming props?

Answer 1

I would most likely make props. For example, size="large | middle | small"
But as such, there are no hard and fast rules as far as I know.

Answer 2

If the total functionality is more than (conditionally) half of the code - one component. If less - two components and one mixin.

Answer 3

Golden Rule. If you caught yourself copy-pasting more than 6-7 lines - put it in a separate function :)
That is, if this is one button - the class is hung up and forgotten. If you understand that just such a button, with some kind of specific logic, needs to be used somewhere else - then in a component.
But here I am a bad adviser. I almost never made such components. Went through classes. But I always do components like Header, Footer, Cooments (comments).