Skip to content

Commit 508c5ae

Browse files
committed
1 parent 977c157 commit 508c5ae

File tree

1 file changed

+28
-3
lines changed

1 file changed

+28
-3
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 @@ return h('h1', {}, this.blogTitle)
136136
```js
137137
// @returns {VNode}
138138
h(
139-
// {String | Object | Function } tag
140-
// HTMLタグ名、コンポーネントまたは非同期コンポーネント
141-
// nullを返す関数を使用した場合、コメントがレンダリングされます
139+
// {String | Object | Function} tag
140+
// HTMLタグ名、コンポーネント、非同期コンポーネント、
141+
// または関数型コンポーネント
142142
//
143143
// 必須
144144
'div',
@@ -609,6 +609,31 @@ app.mount('#demo')
609609

610610
JSX がどのように JavaScript に変換されるのか、より詳細な情報は、 [使用方法](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
## テンプレートのコンパイル
613638

614639
あなたは Vue のテンプレートが実際に render 関数にコンパイルされることに興味があるかもしれません。これは通常知っておく必要のない実装の詳細ですが、もし特定のテンプレートの機能がどのようにコンパイルされるか知りたいのなら、これが面白いかもしれません。これは、 `Vue.compile` を使用してテンプレートの文字列をライブコンパイルする小さなデモです:

0 commit comments

Comments
 (0)