From 00f1c74689d6b0e9b6c9210320e3e260aedc00dd Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 13 Apr 2021 15:50:49 +0900 Subject: [PATCH 1/3] feat: add migration guide > listeners removed --- src/.vuepress/config.js | 1 + src/guide/migration/listeners-removed.md | 74 ++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 src/guide/migration/listeners-removed.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index d3449d63..55eb5120 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -128,6 +128,7 @@ const sidebar = { 'migration/global-api-treeshaking', 'migration/inline-template-attribute', 'migration/keycode-modifiers', + 'migration/listeners-removed', 'migration/props-default-this', 'migration/render-function-api', 'migration/slots-unification', diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md new file mode 100644 index 00000000..5a84f359 --- /dev/null +++ b/src/guide/migration/listeners-removed.md @@ -0,0 +1,74 @@ +--- +title: $listeners removed +badges: + - breaking +--- + +# `$listeners` removed + +## Overview + +The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`: + +```javascript +{ + text: 'this is an attribute', + onClose: () => console.log('close Event triggered') +} +``` + +## 2.x Syntax + +In Vue 2, you can access attributes passed to your components with `this.$attrs`, and event listeners with `this.$listeners`. +In combination with `inheritAttrs: false`, they allow the developer to apply these attributes and listeners to some other element instead of the root element: + +```html + + +``` + +## 3.x Syntax + +In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with `on`, and as such are part of the `$attrs` object, so `$listeners` has been removed. + +```vue + + +``` + +If this component received an `id` attribute and a `v-on:close` listener, the `$attrs` object will now look like this: + +```javascript +{ + id: 'my-input', + onClose: () => console.log('close Event triggered') +} +``` + +## Migration Strategy + +Remove all usages of `$listeners`. + +## See also + +- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) +- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-includes-class-style.md) +- [Migration guide - Changes in the Render Functions API](./render-function-api.md) +- [Migration guide - New Emits Option](./emits-option.md) +- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md) From 6635bcccfc65709bc66d7f7127db00c045592886 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 13 Apr 2021 16:58:44 +0900 Subject: [PATCH 2/3] docs: translate migration guide > listeners removed --- src/guide/migration/listeners-removed.md | 36 ++++++++++++------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md index 5a84f359..7205e9b4 100644 --- a/src/guide/migration/listeners-removed.md +++ b/src/guide/migration/listeners-removed.md @@ -1,14 +1,14 @@ --- -title: $listeners removed +title: $listeners の削除 badges: - breaking --- -# `$listeners` removed +# `$listeners` の削除 -## Overview +## 概要 -The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`: +`$listeners` オブジェクトは Vue 3 ですべて削除されました。イベントリスナは `$attrs` の一部になりました。 ```javascript { @@ -17,10 +17,10 @@ The `$listeners` object has been removed in Vue 3. Event listeners are now part } ``` -## 2.x Syntax +## 2.x での構文 -In Vue 2, you can access attributes passed to your components with `this.$attrs`, and event listeners with `this.$listeners`. -In combination with `inheritAttrs: false`, they allow the developer to apply these attributes and listeners to some other element instead of the root element: +Vue 2 では、コンポーネントに渡された属性は `this.$attrs` で、イベントリスナは `this.$listeners` でアクセスできます。 +`inheritAttrs: false` と組み合わせることで、開発者はこれらの属性やリスナを、ルート要素ではなく他の要素に適用することができます: ```html