Subscribe on changes!

incorrect function overload in defineComponent

avatar
May 31st 2022

Vue version

3.2.36

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-9yenlq?file=vite.config.ts

Steps to reproduce

firstly I saw the function defineComponent has such an overload image I try this way to define my component, but unfortunately, I found out that the incoming props are regarded as attrs and can not be accessed by props

What is expected?

we can get props without runtime check

What is actually happening?

incoming props are regarded as attr

System Info

No response

Any additional comments?

if it is expected, is there any option to control the inheritsAttr behavior for this kind of function call? And Can we skip the runtime props check just like the pure function component?

avatar
May 31st 2022

This is not doing what you think it's doing.its just a shortcut way to directly pass a setup function to defineComponent() - you would still be required to define props (this pattern has been tendered rather insignificant with the introduction of <script setup>)


const component = defineComponent((props) => ...)

component.props = {
  ...
}

So no, there is no way to have props without a runtime check. There is discussions i. The RFC repo concerning possible ways to enable this, but not much movement.

You can use disable inheritAttrs and cast context.attrs, but that wont give you type hints for propsof this component when used in templates.