You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/render-function.md
+28-3Lines changed: 28 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -136,9 +136,9 @@ The `h()` function is a utility to create VNodes. It could perhaps more accurate
136
136
```js
137
137
// @returns {VNode}
138
138
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.
142
142
//
143
143
// Required.
144
144
'div',
@@ -609,6 +609,31 @@ app.mount('#demo')
609
609
610
610
For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/jsx-next#installation).
611
611
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
+
constFunctionalComponent= (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
+
612
637
## Template Compilation
613
638
614
639
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:
0 commit comments