From 05d4c5efcc08b50ada744d52786604588713465f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 17 Apr 2021 19:25:05 +0900 Subject: [PATCH 1/4] fix: remove original text --- src/guide/migration/render-function-api.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index 28fbbc0e..4d321d6c 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -114,7 +114,6 @@ export default { ### 3.x での構文 -In 3.x, the entire VNode props structure is flattened. Using the example from above, here is what it would look like now. 3.x では、全ての VNode のプロパティ構造はフラットになりました。上記の例が下記のようになります。 ```js From 5f372879d662a6ad474c7fba06266ef38a35a7a4 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 19 Apr 2021 19:59:59 +0900 Subject: [PATCH 2/4] docs: Add migration guide for `h` rendering registered component https://github.com/vuejs/docs-next/commit/706a8cdeb0a6ff5aea4b8d6d7ed1996c785274fd#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51 --- src/guide/migration/render-function-api.md | 41 ++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index 4d321d6c..15bafac6 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -127,6 +127,47 @@ export default { key: 'submit-button' } ``` +## 登録済みコンポーネント + +### 2.x での構文 + +2.x では、コンポーネントが登録されていた場合、コンポーネントの名前を文字列として第1引数に渡すと、 Render 関数がうまく動作します: + +```js +// 2.x +Vue.component('button-counter', { + data: () => ({ + count: 0 + }), + template: ` + + ` +}) +export default { + render(h) { + return h('button-counter') + } +} +``` + +### 3.x での構文 + +3.x では、 VNodes がコンテキストフリーになったため、登録されているコンポーネントを暗黙的に探すために、文字列 ID を使うことができなくなります。代わりに、 `resolveComponent` メソッドを使う必要があります: + +```js +// 3.x +import { h, resolveComponent } from 'vue' +export default { + setup() { + const ButtonCounter = resolveComponent('button-counter') + return () => h(ButtonCounter) + } +} +``` + +詳細については、 [Render 関数 API の変更に関する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes) を見てください。 ## 移行の戦略 From 2c0cd21f58c13ee2133e34ac59d9a4235715df09 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 19 Apr 2021 20:08:21 +0900 Subject: [PATCH 3/4] fix: fixed data arrow function https://github.com/vuejs/docs-next/commit/97574c9d0b308200f9a286464f79830ef170ac31#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51 --- src/guide/migration/render-function-api.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index 15bafac6..7c088107 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -127,6 +127,7 @@ export default { key: 'submit-button' } ``` + ## 登録済みコンポーネント ### 2.x での構文 @@ -136,12 +137,14 @@ export default { ```js // 2.x Vue.component('button-counter', { - data: () => ({ - count: 0 - }), + data() { + return { + count: 0 + } + } template: ` ` }) From 2420a5b38671fae6526123572465bb62f7a04b0f Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 19 Apr 2021 20:09:43 +0900 Subject: [PATCH 4/4] add staticClass and style to migration guide https://github.com/vuejs/docs-next/commit/6cc3c7a899eea1e784eaba23813c176cbbc342c3#diff-aa744c862c8dae7617ad8685224b3f8e80bed656707d8716b00b9e9069789a51 --- src/guide/migration/render-function-api.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md index 7c088107..4c30b310 100644 --- a/src/guide/migration/render-function-api.md +++ b/src/guide/migration/render-function-api.md @@ -103,8 +103,10 @@ export default { ```js // 2.x { - class: ['button', 'is-outlined'], - style: { color: '#34495E' }, + staticClass: 'button', + class: {'is-outlined': isOutlined }, + staticStyle: { color: '#34495E' }, + style: { backgroundColor: buttonColor }, attrs: { id: 'submit' }, domProps: { innerHTML: '' }, on: { click: submitForm }, @@ -119,8 +121,8 @@ export default { ```js // 3.x での構文 { - class: ['button', 'is-outlined'], - style: { color: '#34495E' }, + class: ['button', { 'is-outlined': isOutlined }], + style: [{ color: '#34495E' }, { backgroundColor: buttonColor }], id: 'submit', innerHTML: '', onClick: submitForm,