diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index d9c9476f..92dcf3ba 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -1,12 +1,12 @@ -# 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. +プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する `class` 、`style` 、`id` などの属性があります。 -## Attribute Inheritance +## 属性の継承 -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: +ただ一つのルート要素をもつコンポーネントの場合、プロパティでない属性はルート要素にそのまま追加されます。例えば date-picker コンポーネントの場合は次のような形になります。 ```js app.component('date-picker', { @@ -18,19 +18,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 +44,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 +58,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,21 +70,21 @@ 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 の値が表示される } } }) ``` -## Disabling Attribute Inheritance +## 属性の継承の無効化 -If you do **not** want a component to automatically inherit attributes, you can set `inheritAttrs: false` in the component's options. +コンポーネントのオプション内で、`inheritAttrs: false`を指定することで、属性の継承を **無効化** することも可能です。 -The common scenario for disabling an attribute inheritance is when attributes need to be applied to other elements besides the root node. +一般的に属性の継承の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。 -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.). +`inheritAttrs` を `false` にセットした場合属性の継承は無効化されますが、`inheritAttrs` の設定に関わらずコンポーネントの `$attrs` プロパティから、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスすることができます。 -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. +[前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。 ```js{5} app.component('date-picker', { @@ -97,7 +97,7 @@ app.component('date-picker', { }) ``` -With this new configuration, our `data-status` attribute will be applied to our `input` element! +このように記述することで、`data-status` 属性は、 `input` 要素に適用されるようになります。 ```html @@ -109,16 +109,16 @@ 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 +127,7 @@ app.component('custom-layout', { ` }) -// No warnings, $attrs are passed to
element +//
要素に $attrs で属性を渡しているため、 warnings は発行されません app.component('custom-layout', { template: `
...