Skip to content

Commit 8b8288b

Browse files
authored
Optional props declaration (#25)
1 parent bed289b commit 8b8288b

File tree

1 file changed

+92
-0
lines changed

1 file changed

+92
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
- Start Date: 2019-04-08
2+
- Target Major Version: 2.x & 3.x
3+
- Reference Issues: N/A
4+
- Implementation PR: N/A
5+
6+
# Summary
7+
8+
Make component `props` declaration optional.
9+
10+
# Basic example
11+
12+
``` html
13+
<template>
14+
<div>{{ $props.foo }}</div>
15+
</template>
16+
17+
<script>
18+
export default {}
19+
</script>
20+
```
21+
22+
# Motivation
23+
24+
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.
25+
26+
# Detailed design
27+
28+
## Stateful Components
29+
30+
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.
31+
32+
``` html
33+
<template>
34+
<div>{{ $props.foo }}</div>
35+
</template>
36+
37+
<script>
38+
export default {}
39+
</script>
40+
```
41+
42+
If the component has no other options, the entire `<script>` block can be dropped, so the following would be a valid SFC:
43+
44+
``` html
45+
<template>
46+
<div>{{ $props.foo }}</div>
47+
</template>
48+
```
49+
50+
## Functional Components
51+
52+
This is based on plain-function functional components proposed in [Functional and Async Component API Change](https://github.com/vuejs/rfcs/pull/27).
53+
54+
``` js
55+
const FunctionalComp = props => {
56+
return h('div', props.foo)
57+
}
58+
```
59+
60+
To declare props for plain-function functional components, attach it to the function itself:
61+
62+
``` js
63+
FunctionalComp.props = {
64+
foo: Number
65+
}
66+
```
67+
68+
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`):
69+
70+
``` js
71+
const FunctionalComp = (props, slots, attrs) => {
72+
// `attrs` contains all received attributes except declared `foo`
73+
}
74+
75+
FunctionalComp.props = {
76+
foo: Number
77+
}
78+
```
79+
80+
For mode details on the new functional component signature, see [Render Function API Change](https://github.com/vuejs/rfcs/pull/28).
81+
82+
# Drawbacks
83+
84+
N/A
85+
86+
# Alternatives
87+
88+
N/A
89+
90+
# Adoption strategy
91+
92+
The behavior is fully backwards compatible.

0 commit comments

Comments
 (0)