✨ Props sharing patterns and recommended method #8187
jd-solanki
started this conversation in
General Discussions
Replies: 1 comment
-
Reusing props is such a DX issue at the moment. type SomeAnotherComponentsProps = InstanceType<typeof SomeAnotherComponent>['$props'];
interface Props extends SomeAnotherComponentsProps {
// new props..
} According to Evan's comment, this is an antipattern in Vue 3.3, which doesn't makes sense when you reuse props instead of having repetitive declarations |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi 👋🏻
I have be discovery and experimenting with props sharing patterns I can use in my UI lib. Hence, I wanted to discuss and identify the best pattern for the job. Here's two pattern I'm aware of:
Object Pattern
I create a props object in
props.ts
along with my component SFC that export the props object:Then, I import the props object in my component SFC and use it in the
props
option:I reuse them in another component by importing the props object:
Pros
Cons
PropType
helperExtractPropTypes
helper because it's for child component according to Evan.Interface & Defaults Object Pattern
In this pattern, I create an interface for props and a separate object for defaults:
Then, I import the props interface in my component SFC and use it in the
props
option:I reuse them in another component by importing the props interface:
Pros
Cons
withDefaults
helper or while merging props in another componentQuestions
as const
for props' defaults object to get correct type of props object in SFC (considering volar)?Conclusion 🤔
I'm not sure which pattern is better. I'm leaning towards the second pattern because I can use TS interface for prop type. But, I'm not sure if I'm missing something. I would love to hear core team's thoughts on this.
Beta Was this translation helpful? Give feedback.
All reactions