diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 1e1b5e88b0..2c9b4d21a0 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -120,9 +120,11 @@ const sidebar = { '/guide/migration/array-refs', '/guide/migration/async-components', '/guide/migration/attribute-coercion', + '/guide/migration/attrs-includes-class-style', '/guide/migration/custom-directives', '/guide/migration/custom-elements-interop', '/guide/migration/data-option', + '/guide/migration/emits-option', '/guide/migration/events-api', '/guide/migration/filters', '/guide/migration/fragments', @@ -132,10 +134,12 @@ const sidebar = { '/guide/migration/inline-template-attribute', '/guide/migration/key-attribute', '/guide/migration/keycode-modifiers', + '/guide/migration/listeners-removed', '/guide/migration/props-default-this', '/guide/migration/render-function-api', '/guide/migration/slots-unification', '/guide/migration/transition', + '/guide/migration/v-on-native-modifier-removed', '/guide/migration/v-model', '/guide/migration/v-if-v-for', '/guide/migration/v-bind' diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md new file mode 100644 index 0000000000..dbb6a5ce52 --- /dev/null +++ b/src/guide/migration/attrs-includes-class-style.md @@ -0,0 +1,69 @@ +--- +title: $attrs includes class & style +badges: + - breaking +--- + +# `$attrs` includes `class` & `style` + +## Overview + +`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`. + +## 2.x Behavior + +`class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are. + +A side effect of this manifests when using `inheritAttrs: false`: + +- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them. +- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element: + +```vue + + +``` + +when used like this: + +```html + +``` + +...will generate this HTML: + +```html + +``` + +## 3.x Behavior + +`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML: + +```html + +``` + +## Migration Strategy + +In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element. + +## See also + +- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) +- [Migration guide - `$listeners` removed](./listeners-removed.md) +- [Migration guide - New Emits Option](./emits-option.md) +- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md) +- [Migration guide - Changes in the Render Functions API](./render-function-api.md) diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md new file mode 100644 index 0000000000..968a0f41f7 --- /dev/null +++ b/src/guide/migration/emits-option.md @@ -0,0 +1,97 @@ +--- +title: emits Option +badges: + - new +--- + +# `emits` Option + +## Overview + +Vue 3 now offers an `emits` option similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent. + +## 2.x Behavior + +In Vue 2, you can define the props that a component received, but you can't declare which events it can emit: + +```html + + +``` + +## 3.x Behavior + +Similar to props, the events that the component emits can now be defined with the `emits` option. + +```html + + +``` + +The option also accepts an object notation, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in props definitions. + +For more information on this, please read the [API documentation for this feature](../../api/options-data.md#emits). + +## Migration Strategy + +It is highly recommended that you document all of the emitted events by your each of components this way because of the [removal of the `.native` modifier](./v-on-native-modifier-removed.md). + +All events not defined with `emits` are now added as DOM event listeners to the component's root node (unless `inheritAttrs: false` has been set). + +### Example + +For components that re-emit native events to their parent, this would now lead to two events being fired: + +```vue + + +``` + +When a parent listens for the `click` event on the component: + +```html + +``` + +it would now be triggered _twice_: + +- Once from `$emit()` +- Once from a native event listener applied to the root element + +Here you have two options: + +1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `` +2. Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway. + +## See also + +- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md) +- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md) +- [Migration guide - `$listeners` removed](./listeners-removed.md) +- [Migration guide - `$attrs` includes `class` & `style` ](./attrs-includes-class-style.md) +- [Migration guide - Changes in the Render Functions API](./render-function-api.md) diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index 74cd2eca07..86e73bfed3 100644 --- a/src/guide/migration/introduction.md +++ b/src/guide/migration/introduction.md @@ -1,10 +1,10 @@ # Introduction -::: info -New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html) to get started. +::: info +New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html) to get started. ::: -This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change. +This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change. - [Quickstart](#quickstart) - [Notable New Features](#notable-new-features) @@ -69,6 +69,7 @@ The following consists a list of breaking changes from 2.x: - [`key` usage on `