From 77e443733ce11edc8d83b6b96a457c213d09b50a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Mon, 21 Sep 2020 23:54:16 +0900 Subject: [PATCH 1/7] update --- src/guide/component-attrs.md | 43 +++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index d9c9476f..46371b06 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -1,12 +1,16 @@ -# Non-Prop Attributes +# プロパティでない属性 -> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +> このページは [コンポーネントの基本](component-basics.md) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。 A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes. -## Attribute Inheritance +コンポーネントにおけるプロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。なお、共通の認識として `class` や `style`, `id` 属性はここに含まれません。 + + +## 属性の継承 + +ただ一つのルート要素をもつコンポーネントの場合、プロパティでない属性はルート要素にそのまま追加されます。例えば date-picker コンポーネントの場合は次のような形になります。 -When a component returns a single root node, non-prop attributes will automatically be added to the root node's attributes. For example, in the instance of a date-picker component: ```js app.component('date-picker', { @@ -18,19 +22,19 @@ app.component('date-picker', { }) ``` -In the event we need to define the status of the date-picker component via a `data-status` property, it will be applied to the root node (i.e., `div.date-picker`). +`data-status` プロパティを用いて　date-picker コンポーネントの状態を定義するような場合には、このプロパティはルート要素 (すなわち `div.date-picker`) に適用されます。 ```html - + - +
``` -Same rule applies to the event listeners: +イベントリスナについても同様のことが言えます。 ```html @@ -44,7 +48,7 @@ app.component('date-picker', { }) ``` -This might be helpful when we have an HTML element with `change` event as a root element of `date-picker`. +このような実装は、`date-picker` のルート要素で `change` イベントを扱うケースなどで役に立つでしょう。 ```js app.component('date-picker', { @@ -58,7 +62,7 @@ app.component('date-picker', { }) ``` -In this case, `change` event listener is passed from the parent component to the child and it will be triggered on native `` 要素本来の `change` イベントにより発火されます。特段、`date-picker` からの明示的なイベント処理を記述する必要はありません。 ```html
@@ -70,7 +74,7 @@ In this case, `change` event listener is passed from the parent component to the const app = Vue.createApp({ methods: { showChange(event) { - console.log(event.target.value) // will log a value of the selected option + console.log(event.target.value) // 選択された option の値が表示される } } }) @@ -78,13 +82,12 @@ const app = Vue.createApp({ ## Disabling Attribute Inheritance -If you do **not** want a component to automatically inherit attributes, you can set `inheritAttrs: false` in the component's options. - -The common scenario for disabling an attribute inheritance is when attributes need to be applied to other elements besides the root node. +属性の継承を望まない場合、コンポーネントのオプション内で、`inheritAttrs: false`を指定することができます。 -By setting the `inheritAttrs` option to `false`, this gives you access to the component's `$attrs` property, which includes all attributes not included to component `props` and `emits` properties (e.g., `class`, `style`, `v-on` listeners, etc.). +一般的にこの継承を無効化したいケースというのは、ルート要素ではない別の要素に属性を適用したいようなケースでしょう。 -Using our date-picker component example from the [previous section]('#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input` element rather than the root `div` element, this can be accomplished by using the `v-bind` shortcut. +`inheritAttrs` を `false` にセットすることで、コンポーネントの `$attrs` プロパティが利用可能になり、`props` や `emits` などのプロパティ(`class` や `style` 、 `v-on` といったもの)を除く全ての属性にアクセスできるようになります。 +[previous section]('#属性の継承) で利用した date-picker のコンポーネント例で、全てのプロパティでない属性を ルートの `div` 要素ではなく `input` 要素に適用する場合には、`v-bind` を用いると便利でしょう。 ```js{5} app.component('date-picker', { @@ -97,7 +100,7 @@ app.component('date-picker', { }) ``` -With this new configuration, our `data-status` attribute will be applied to our `input` element! +このように記述した場合、`data-status` 属性は、 `input` 要素に適用されます。 ```html @@ -111,14 +114,14 @@ With this new configuration, our `data-status` attribute will be applied to our ## Attribute Inheritance on Multiple Root Nodes -Unlike single root node components, components with multiple root nodes do not have an automatic attribute fallthrough behavior. If `$attrs` are not bound explicitly, a runtime warning will be issued. +ルート要素が一つでなく、複数のルート要素からなるコンポーネントには、自動的に属性の継承が行われることはありません。`$attrs` を用いた明示的なアサインを行わない場合、ランタイム上で warning が発行されます。 ```html ``` ```js -// This will raise a warning +// これは warning を発行します app.component('custom-layout', { template: `
...
@@ -127,7 +130,7 @@ app.component('custom-layout', { ` }) -// No warnings, $attrs are passed to
element +//
要素に $attrs で属性を渡しているため、 warnings は発行されません app.component('custom-layout', { template: `
...
From 9b04a936ca9e2f1a6ef1795e2dd726115d065ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Tue, 22 Sep 2020 00:01:11 +0900 Subject: [PATCH 2/7] update --- src/guide/component-attrs.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index 46371b06..a017666f 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -2,11 +2,8 @@ > このページは [コンポーネントの基本](component-basics.md) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。 -A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes. - コンポーネントにおけるプロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。なお、共通の認識として `class` や `style`, `id` 属性はここに含まれません。 - ## 属性の継承 ただ一つのルート要素をもつコンポーネントの場合、プロパティでない属性はルート要素にそのまま追加されます。例えば date-picker コンポーネントの場合は次のような形になります。 From eea2f0924845b0fe030b4ed97fe53cd6ba61fdfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Tue, 22 Sep 2020 00:02:29 +0900 Subject: [PATCH 3/7] update --- src/guide/component-attrs.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index a017666f..9ab6b14c 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -2,13 +2,12 @@ > このページは [コンポーネントの基本](component-basics.md) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。 -コンポーネントにおけるプロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。なお、共通の認識として `class` や `style`, `id` 属性はここに含まれません。 +プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。なお、共通の認識として `class` や `style`, `id` 属性はここに含まれません。 ## 属性の継承 ただ一つのルート要素をもつコンポーネントの場合、プロパティでない属性はルート要素にそのまま追加されます。例えば date-picker コンポーネントの場合は次のような形になります。 - ```js app.component('date-picker', { template: ` From c8ce9983c0d880c0b12dc6aeec783b0a1e6eece5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Tue, 22 Sep 2020 00:14:57 +0900 Subject: [PATCH 4/7] update --- src/guide/component-attrs.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index 9ab6b14c..2a1c87af 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -18,10 +18,10 @@ app.component('date-picker', { }) ``` -`data-status` プロパティを用いて　date-picker コンポーネントの状態を定義するような場合には、このプロパティはルート要素 (すなわち `div.date-picker`) に適用されます。 +`data-status` 属性を用いて　date-picker コンポーネントの状態を定義するような場合には、この属性はルート要素 (すなわち `div.date-picker`) に適用されます。 ```html - + @@ -76,14 +76,15 @@ const app = Vue.createApp({ }) ``` -## Disabling Attribute Inheritance +## 属性の継承の無効化 -属性の継承を望まない場合、コンポーネントのオプション内で、`inheritAttrs: false`を指定することができます。 +コンポーネントのオプション内で、`inheritAttrs: false`を指定することで、属性の継承を **無効化** することも可能です。 -一般的にこの継承を無効化したいケースというのは、ルート要素ではない別の要素に属性を適用したいようなケースでしょう。 +一般的に属性の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。 -`inheritAttrs` を `false` にセットすることで、コンポーネントの `$attrs` プロパティが利用可能になり、`props` や `emits` などのプロパティ(`class` や `style` 、 `v-on` といったもの)を除く全ての属性にアクセスできるようになります。 -[previous section]('#属性の継承) で利用した date-picker のコンポーネント例で、全てのプロパティでない属性を ルートの `div` 要素ではなく `input` 要素に適用する場合には、`v-bind` を用いると便利でしょう。 +`inheritAttrs` を `false` にセットした場合、コンポーネントの `$attrs` プロパティを通じて、コンポーネントのプロパティ (`props` や `emits` それに `class` や `style` 、 `v-on` といったもの)を除く全ての属性にアクセスできるようになります。 + +[previous section]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。 ```js{5} app.component('date-picker', { @@ -96,7 +97,7 @@ app.component('date-picker', { }) ``` -このように記述した場合、`data-status` 属性は、 `input` 要素に適用されます。 +このように記述することで、`data-status` 属性は、 `input` 要素に適用されるようになります。 ```html @@ -108,9 +109,9 @@ app.component('date-picker', {
``` -## Attribute Inheritance on Multiple Root Nodes +## ルート要素が複数の場合の属性の継承 -ルート要素が一つでなく、複数のルート要素からなるコンポーネントには、自動的に属性の継承が行われることはありません。`$attrs` を用いた明示的なアサインを行わない場合、ランタイム上で warning が発行されます。 +コンポーネントのルート要素が一つでなく複数のルート要素からなる場合には、暗黙の属性の継承は行われません。`$attrs` を用いた明示的なアサインを行わない場合、ランタイム上で warning が発行されます。 ```html From 4d4d1d4e849fbbfb670ab6d39d68dd883fbc8b8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Tue, 22 Sep 2020 12:40:46 +0900 Subject: [PATCH 5/7] fix --- src/guide/component-attrs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index 2a1c87af..abcf2d42 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -82,9 +82,9 @@ const app = Vue.createApp({ 一般的に属性の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。 -`inheritAttrs` を `false` にセットした場合、コンポーネントの `$attrs` プロパティを通じて、コンポーネントのプロパティ (`props` や `emits` それに `class` や `style` 、 `v-on` といったもの)を除く全ての属性にアクセスできるようになります。 +`inheritAttrs` を `false` にセットした場合、コンポーネントの `$attrs` プロパティを通じて、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスできるようになります。 -[previous section]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。 +[前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。 ```js{5} app.component('date-picker', { From 39087739cd5c7f488096e448bcb1539a7b4b14d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Thu, 24 Sep 2020 20:45:41 +0900 Subject: [PATCH 6/7] Update component-attrs.md --- src/guide/component-attrs.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index abcf2d42..fb6059b1 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -2,7 +2,7 @@ > このページは [コンポーネントの基本](component-basics.md) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。 -プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。なお、共通の認識として `class` や `style`, `id` 属性はここに含まれません。 +プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する `class` 、`style` 、`id` などの属性があります。 ## 属性の継承 @@ -80,9 +80,9 @@ const app = Vue.createApp({ コンポーネントのオプション内で、`inheritAttrs: false`を指定することで、属性の継承を **無効化** することも可能です。 -一般的に属性の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。 +一般的に属性の継承の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。 -`inheritAttrs` を `false` にセットした場合、コンポーネントの `$attrs` プロパティを通じて、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスできるようになります。 +`inheritAttrs` を `false` にセットした場合属性の形象化は無効化されますが、`inheritAttrs` の設定に関わらずコンポーネントの `$attrs` プロパティから、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセススルことができます。 [前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。 From ff7f7b77733db9201be338e8f3a67360357ae97f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=8B=E3=81=8B=E3=81=AD?= Date: Thu, 24 Sep 2020 20:48:00 +0900 Subject: [PATCH 7/7] Update component-attrs.md --- src/guide/component-attrs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index fb6059b1..92dcf3ba 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -82,7 +82,7 @@ const app = Vue.createApp({ 一般的に属性の継承の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。 -`inheritAttrs` を `false` にセットした場合属性の形象化は無効化されますが、`inheritAttrs` の設定に関わらずコンポーネントの `$attrs` プロパティから、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセススルことができます。 +`inheritAttrs` を `false` にセットした場合属性の継承は無効化されますが、`inheritAttrs` の設定に関わらずコンポーネントの `$attrs` プロパティから、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスすることができます。 [前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。