Skip to content

Commit 5f37287

Browse files
committed
docs: Add migration guide for h rendering registered component
vuejs/docs@706a8cd#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51
1 parent 05d4c5e commit 5f37287

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

src/guide/migration/render-function-api.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,47 @@ export default {
127127
key: 'submit-button'
128128
}
129129
```
130+
## 登録済みコンポーネント
131+
132+
### 2.x での構文
133+
134+
2.x では、コンポーネントが登録されていた場合、コンポーネントの名前を文字列として第1引数に渡すと、 Render 関数がうまく動作します:
135+
136+
```js
137+
// 2.x
138+
Vue.component('button-counter', {
139+
data: () => ({
140+
count: 0
141+
}),
142+
template: `
143+
<button @click="count++">
144+
Clicked {{ count }} times.
145+
</button>
146+
`
147+
})
148+
export default {
149+
render(h) {
150+
return h('button-counter')
151+
}
152+
}
153+
```
154+
155+
### 3.x での構文
156+
157+
3.x では、 VNodes がコンテキストフリーになったため、登録されているコンポーネントを暗黙的に探すために、文字列 ID を使うことができなくなります。代わりに、 `resolveComponent` メソッドを使う必要があります:
158+
159+
```js
160+
// 3.x
161+
import { h, resolveComponent } from 'vue'
162+
export default {
163+
setup() {
164+
const ButtonCounter = resolveComponent('button-counter')
165+
return () => h(ButtonCounter)
166+
}
167+
}
168+
```
169+
170+
詳細については、 [Render 関数 API の変更に関する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes) を見てください。
130171

131172
## 移行の戦略
132173

0 commit comments

Comments
 (0)