From 28822fa984c1fcac029c189a4b66f5b9e827bfd6 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sat, 27 Feb 2021 16:43:57 +0100 Subject: [PATCH 1/7] feat: added propsData mention in migration guide --- src/.vuepress/config.js | 1 + src/guide/migration/props-data.md | 47 +++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 src/guide/migration/props-data.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 1cf2e3befd..50e6e53368 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -194,6 +194,7 @@ const sidebar = { '/guide/migration/key-attribute', '/guide/migration/keycode-modifiers', '/guide/migration/listeners-removed', + '/guide/migration/props-data', '/guide/migration/props-default-this', '/guide/migration/render-function-api', '/guide/migration/slots-unification', diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md new file mode 100644 index 0000000000..259c588e2f --- /dev/null +++ b/src/guide/migration/props-data.md @@ -0,0 +1,47 @@ +--- +badges: + - breaking +--- + +# `propsData` passed on instance creation + +## Overview + +`propsData` option to pass props to Vue instance during its creation is removed. To pass props to the root of Vue application, use a second argument of [createApp](/api/global-api.html#createapp) + +## 2.x Syntax + +In 2.x, we were able to pass props to Vue instance during its creation: + +```js +const Comp = Vue.extend({ + props: ['username'], + template: '
{{ username }}
' +}) + +new Comp({ + propsData: { + username: 'Evan' + } +}) +``` + +## 3.x Update + +`propsData` option was removed. If you need to pass props to the application instance during its creation, you should use `createApp` second argument: + +```js +const app = createApp( + { + props: ['username'] + }, + { username: 'Evan' } +) +``` + +```html +
+ + {{ username }} +
+``` From a0f3c30dda01c1cdd36670779e515e6841389713 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sat, 27 Feb 2021 16:46:36 +0100 Subject: [PATCH 2/7] feat: added propsData to migration intro --- src/guide/migration/introduction.md | 5 +++-- src/guide/migration/props-data.md | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index d12365c8a6..802047ec92 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -110,10 +110,11 @@ The following consists a list of breaking changes from 2.x: ### Removed APIs - [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html) -- [$on, $off and $once instance methods](/guide/migration/events-api.html) +- [$on, $off and \$once instance methods](/guide/migration/events-api.html) - [Filters](/guide/migration/filters.html) - [Inline templates attributes](/guide/migration/inline-template-attribute.html) -- [`$children` instance property](/guide/migration/children.md) +- [`$children` instance property](/guide/migration/children.html) +- [`propsData` option](/guide/migration/props-data.html) - `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components. ## Supporting Libraries diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md index 259c588e2f..960b747833 100644 --- a/src/guide/migration/props-data.md +++ b/src/guide/migration/props-data.md @@ -1,9 +1,9 @@ --- badges: - - breaking + - removed --- -# `propsData` passed on instance creation +# `propsData` ## Overview From e5ac0cb63cd38bd372ed22c08394b33ce1077058 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 2 Mar 2021 07:24:10 +0100 Subject: [PATCH 3/7] Update src/guide/migration/introduction.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/migration/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index 802047ec92..cf462c015e 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -110,7 +110,7 @@ The following consists a list of breaking changes from 2.x: ### Removed APIs - [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html) -- [$on, $off and \$once instance methods](/guide/migration/events-api.html) +- [$on, $off and $once instance methods](/guide/migration/events-api.html) - [Filters](/guide/migration/filters.html) - [Inline templates attributes](/guide/migration/inline-template-attribute.html) - [`$children` instance property](/guide/migration/children.html) From 4dc8e5feafaebf3e5271d669a8990bcc73ca3fbf Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 2 Mar 2021 07:24:17 +0100 Subject: [PATCH 4/7] Update src/guide/migration/props-data.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/migration/props-data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md index 960b747833..6722df5422 100644 --- a/src/guide/migration/props-data.md +++ b/src/guide/migration/props-data.md @@ -7,7 +7,7 @@ badges: ## Overview -`propsData` option to pass props to Vue instance during its creation is removed. To pass props to the root of Vue application, use a second argument of [createApp](/api/global-api.html#createapp) +The `propsData` option, used to pass props to the Vue instance during its creation, is removed. To pass props to the root component of a Vue 3 application, use the second argument of [createApp](/api/global-api.html#createapp). ## 2.x Syntax From 9fb2f406e43cdbd494f4b4cd1b772933b71b4de5 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 2 Mar 2021 07:24:22 +0100 Subject: [PATCH 5/7] Update src/guide/migration/props-data.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/migration/props-data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md index 6722df5422..72e57c9588 100644 --- a/src/guide/migration/props-data.md +++ b/src/guide/migration/props-data.md @@ -11,7 +11,7 @@ The `propsData` option, used to pass props to the Vue instance during its creati ## 2.x Syntax -In 2.x, we were able to pass props to Vue instance during its creation: +In 2.x, we were able to pass props to a Vue instance during its creation: ```js const Comp = Vue.extend({ From 45692daecf2b9990309101b4f7021e0e04ceaabd Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 2 Mar 2021 07:24:27 +0100 Subject: [PATCH 6/7] Update src/guide/migration/props-data.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/migration/props-data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md index 72e57c9588..432ae4b364 100644 --- a/src/guide/migration/props-data.md +++ b/src/guide/migration/props-data.md @@ -28,7 +28,7 @@ new Comp({ ## 3.x Update -`propsData` option was removed. If you need to pass props to the application instance during its creation, you should use `createApp` second argument: +The `propsData` option has been removed. If you need to pass props to the root component instance during its creation, you should use the second argument of `createApp`: ```js const app = createApp( From 43be8d414f2dc36fe01ed977f40ca4db93d94e9a Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 2 Mar 2021 07:24:40 +0100 Subject: [PATCH 7/7] Update src/guide/migration/props-data.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/migration/props-data.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md index 432ae4b364..8c12d3ff0a 100644 --- a/src/guide/migration/props-data.md +++ b/src/guide/migration/props-data.md @@ -33,15 +33,9 @@ The `propsData` option has been removed. If you need to pass props to the root c ```js const app = createApp( { - props: ['username'] + props: ['username'], + template: '
{{ username }}
' }, { username: 'Evan' } ) ``` - -```html -
- - {{ username }} -
-```