@@ -103,8 +103,10 @@ export default {
103
103
``` js
104
104
// 2.x
105
105
{
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 },
108
110
attrs: { id: ' submit' },
109
111
domProps: { innerHTML: ' ' },
110
112
on: { click: submitForm },
@@ -114,21 +116,64 @@ export default {
114
116
115
117
### 3.x での構文
116
118
117
- In 3.x, the entire VNode props structure is flattened. Using the example from above, here is what it would look like now.
118
119
3.x では、全ての VNode のプロパティ構造はフラットになりました。上記の例が下記のようになります。
119
120
120
121
``` js
121
122
// 3.x での構文
122
123
{
123
- class: [' button' , ' is-outlined' ],
124
- style: { color: ' #34495E' },
124
+ class: [' button' , { ' is-outlined' : isOutlined } ],
125
+ style: [ { color: ' #34495E' }, { backgroundColor : buttonColor }] ,
125
126
id: ' submit' ,
126
127
innerHTML: ' ' ,
127
128
onClick: submitForm,
128
129
key: ' submit-button'
129
130
}
130
131
```
131
132
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
+
132
177
## 移行の戦略
133
178
134
179
### ライブラリの著者
0 commit comments