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/introduction.md b/src/guide/migration/introduction.md index d12365c8a6..cf462c015e 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -113,7 +113,8 @@ The following consists a list of breaking changes from 2.x: - [$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 new file mode 100644 index 0000000000..8c12d3ff0a --- /dev/null +++ b/src/guide/migration/props-data.md @@ -0,0 +1,41 @@ +--- +badges: + - removed +--- + +# `propsData` + +## Overview + +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 + +In 2.x, we were able to pass props to a Vue instance during its creation: + +```js +const Comp = Vue.extend({ + props: ['username'], + template: '
{{ username }}
' +}) + +new Comp({ + propsData: { + username: 'Evan' + } +}) +``` + +## 3.x Update + +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( + { + props: ['username'], + template: '
{{ username }}
' + }, + { username: 'Evan' } +) +```