Skip to content

Commit 1d2fb16

Browse files
docs: add a section about functional components (#1008)
1 parent f0cfcb0 commit 1d2fb16

File tree

2 files changed

+29
-4
lines changed

2 files changed

+29
-4
lines changed

src/guide/render-function.md

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,9 +136,9 @@ The `h()` function is a utility to create VNodes. It could perhaps more accurate
136136
```js
137137
// @returns {VNode}
138138
h(
139-
// {String | Object | Function } tag
140-
// An HTML tag name, a component or an async component.
141-
// Using function returning null would render a comment.
139+
// {String | Object | Function} tag
140+
// An HTML tag name, a component, an async component, or a
141+
// functional component.
142142
//
143143
// Required.
144144
'div',
@@ -609,6 +609,31 @@ app.mount('#demo')
609609

610610
For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/jsx-next#installation).
611611

612+
## Functional Components
613+
614+
Functional components are an alternative form of component that don't have any state of their own. They are rendered without creating a component instance, bypassing the usual component lifecycle.
615+
616+
To create a functional component we use a plain function, rather than an options object. The function is effectively the `render` function for the component. As there is no `this` reference for a functional component, Vue will pass in the `props` as the first argument:
617+
618+
```js
619+
const FunctionalComponent = (props, context) => {
620+
// ...
621+
}
622+
```
623+
624+
The second argument, `context`, contains three properties: `attrs`, `emit`, and `slots`. These are equivalent to the instance properties [`$attrs`](/api/instance-properties.html#attrs), [`$emit`](/api/instance-methods.html#emit), and [`$slots`](/api/instance-properties.html#slots) respectively.
625+
626+
Most of the usual configuration options for components are not available for functional components. However, it is possible to define [`props`](/api/options-data.html#props) and [`emits`](/api/options-data.html#emits) by adding them as properties:
627+
628+
```js
629+
FunctionalComponent.props = ['value']
630+
FunctionalComponent.emits = ['click']
631+
```
632+
633+
If the `props` option is not specified, then the `props` object passed to the function will contain all attributes, the same as `attrs`. The prop names will not be normalized to camelCase unless the `props` option is specified.
634+
635+
Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h`, it will be treated as a functional component.
636+
612637
## Template Compilation
613638

614639
You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string:

src/guide/transitions-list.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ Vue.component('my-special-transition', {
300300
})
301301
```
302302

303-
And [functional components](render-function.html#Functional-Components) are especially well-suited to this task:
303+
And [functional components](render-function.html#functional-components) are especially well-suited to this task:
304304

305305
```js
306306
Vue.component('my-special-transition', {

0 commit comments

Comments
 (0)