Skip to content

Commit 3735c6e

Browse files
authored
Migration > Render Function Api の翻訳の追従 (#267)
* fix: remove original text * docs: Add migration guide for `h` rendering registered component vuejs/docs@706a8cd#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51 * fix: fixed data arrow function vuejs/docs@97574c9#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51 * add staticClass and style to migration guide vuejs/docs@6cc3c7a#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51
1 parent ecec012 commit 3735c6e

File tree

1 file changed

+50
-5
lines changed

1 file changed

+50
-5
lines changed

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

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,10 @@ export default {
103103
```js
104104
// 2.x
105105
{
106-
class: ['button', 'is-outlined'],
107-
style: { color: '#34495E' },
106+
staticClass: 'button',
107+
class: {'is-outlined': isOutlined },
108+
staticStyle: { color: '#34495E' },
109+
style: { backgroundColor: buttonColor },
108110
attrs: { id: 'submit' },
109111
domProps: { innerHTML: '' },
110112
on: { click: submitForm },
@@ -114,21 +116,64 @@ export default {
114116

115117
### 3.x での構文
116118

117-
In 3.x, the entire VNode props structure is flattened. Using the example from above, here is what it would look like now.
118119
3.x では、全ての VNode のプロパティ構造はフラットになりました。上記の例が下記のようになります。
119120

120121
```js
121122
// 3.x での構文
122123
{
123-
class: ['button', 'is-outlined'],
124-
style: { color: '#34495E' },
124+
class: ['button', { 'is-outlined': isOutlined }],
125+
style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
125126
id: 'submit',
126127
innerHTML: '',
127128
onClick: submitForm,
128129
key: 'submit-button'
129130
}
130131
```
131132

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

134179
### ライブラリの著者

0 commit comments

Comments
 (0)