diff --git a/src/guide/render-function.md b/src/guide/render-function.md index a5a17a7689..80360f6dc4 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -136,9 +136,9 @@ The `h()` function is a utility to create VNodes. It could perhaps more accurate ```js // @returns {VNode} h( - // {String | Object | Function } tag - // An HTML tag name, a component or an async component. - // Using function returning null would render a comment. + // {String | Object | Function} tag + // An HTML tag name, a component, an async component, or a + // functional component. // // Required. 'div', @@ -609,6 +609,31 @@ app.mount('#demo') For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/jsx-next#installation). +## Functional Components + +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. + +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: + +```js +const FunctionalComponent = (props, context) => { + // ... +} +``` + +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. + +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: + +```js +FunctionalComponent.props = ['value'] +FunctionalComponent.emits = ['click'] +``` + +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. + +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. + ## Template Compilation 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: diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md index 93f277bb46..d22ff24813 100644 --- a/src/guide/transitions-list.md +++ b/src/guide/transitions-list.md @@ -300,7 +300,7 @@ Vue.component('my-special-transition', { }) ``` -And [functional components](render-function.html#Functional-Components) are especially well-suited to this task: +And [functional components](render-function.html#functional-components) are especially well-suited to this task: ```js Vue.component('my-special-transition', {