Optional Props Declaration

[yyx990803]

• Start Date: 2019-03-21
• Target Major Version: 2.x & 3.x
• Reference Issues: N/A
• Implementation PR: N/A

Summary

Make component props declaration optional.

Basic example

<!-- valid SFC -->
<template>
  <div>{{ $props.foo }}</div>
</template>

Motivation

In simple use cases where there is no need for runtime props type checking (especially in functional components), making props optional could result in simpler code.

Detailed design

Stateful Components

When a component has no props declarations, all attributes passed by the parent are exposed in this.$props. Unlike declared props, they will NOT be exposed directly on this. In addition, in this case this.$attrs and this.$props will be pointing to the same object.

Nice thing about this is you can omit the <script> block altogether in a simple SFC:

<template>
  <div>{{ $props.foo }}</div>
</template>

Functional Components

This is based on plain-function functional components proposed in Functional and Async Component API Change.

const FunctionalComp = props => {
  return h('div', props.foo)
}

To declare props for plain-function functional components, attach it to the function itself:

FunctionalComp.props = {
  foo: Number
}

Similar to stateful components, when props are declared, the props arguments will only contain the declared props - attributes received but not declared as props will be in the 3rd argument (attrs):

const FunctionalComp = (props, slots, attrs) => {
  // `attrs` contains all received attributes except declared `foo`
}

FunctionalComp.props = {
  foo: Number
}

For mode details on the new functional component signature, see Render Function API Change.

Drawbacks

N/A

Alternatives

N/A

Adoption strategy

The behavior is fully backwards compatible.

[posva]

Regarding TS users, they won't be able to use this, would they?
About the runtime check, I know it's unrelated, but are we still leaving it for development only?

[yyx990803]

@posva they can, with the <Props> generic argument.

For the runtime check, yes it is still dev only.

[yyx990803]

Published: vuejs/rfcs#25