From ae5c2c788487bf0235205f374de3cae5c5a5558e Mon Sep 17 00:00:00 2001 From: fussy113 Date: Sat, 19 Sep 2020 23:44:09 +0900 Subject: [PATCH 1/2] =?UTF-8?q?#15=20Custom=20Events=E3=81=AE=E7=BF=BB?= =?UTF-8?q?=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/component-custom-events.md | 66 ++++++++++++++-------------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 1fde36ff..b0238cff 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -1,29 +1,29 @@ -# Custom Events +# カスタムイベント -> 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) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。 -## Event Names +## イベント名 -Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name: +コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。その代わり発火されるイベント名とイベントリスナ名は全く同じにする必要があります。例えばキャメルケース(camelCase)のイベント名でイベントを発火した場合: ```js this.$emit('myEvent') ``` -Listening to the kebab-cased version will have no effect: +ケバブケース(kebab-case)でリスナ名を作っても何も起こりません： ```html ``` -Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `@myEvent` would become `@myevent` -- making `myEvent` impossible to listen to. +イベント名は JavaScript 内で変数やプロパティ名として扱われることはないので、キャメルケース(camelCase)またはパスカルケース(PascalCase)を使用する理由はありません。 さらに DOM テンプレート内の `v-on` イベントリスナは自動的に小文字に変換されます ( HTML が大文字と小文字を判別しないため)。このため `@myEvent` は `@myevent` になり `myEvent` にリスナが反応することができなくなります。 -For these reasons, we recommend you **always use kebab-case for event names**. +こういった理由から **いつもケバブケース(kebab-case)を使うこと** をお薦めします。 -## Defining Custom Events +## カスタムイベントの定義 -Emitted events can be defined on the component via the `emits` option. +発行されたイベントは、 `emits` オプションを介して、コンポーネントで定義することが出来ます。 ```js app.component('custom-form', { @@ -31,17 +31,18 @@ app.component('custom-form', { }) ``` -In the event a native event (e.g., `click`) is defined in the `emits` option, it will be overwritten by the event in the component instead of being treated as a native listener. -::: tip -It is recommended to define all emitted events in order to better document how a component should work. +ネイティブイベント（ `click` など）が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 + +::: ヒント +コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。 ::: -### Validate Emitted Events +### 発行されたイベントを検証する -Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the Array syntax. +プロップタイプの検証と同様に、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。 -To add validation, the event is assigned a function that receives the arguments passed to the `$emit` call and returns a boolean to indicate whether the event is valid or not. +検証を追加するために、イベントには、 `$emit` 呼び出しに渡された引数を受け取る関数が割り当てられ、イベントが有効かどうかを示す真偽値を返します。 ```js app.component('custom-form', { @@ -67,15 +68,14 @@ app.component('custom-form', { }) ``` -## `v-model` arguments +## `v-model` の引数 -By default, `v-model` on a component uses `modelValue` as the prop and `update:modelValue` as the event. We can modify these names passing an argument to `v-model`: +デフォルトでは、コンポーネントの `v-model` はプロップとして `modelValue` を使用し、イベントとして `update：modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。 ```html ``` - -In this case, child component will expect a `foo` prop and emits `update:foo` event to sync: +この場合、子コンポーネントは `foo` プロップを期待し、同期するために `update：foo` イベントを発行します。 ```js const app = Vue.createApp({}) @@ -85,7 +85,7 @@ app.component('my-component', { foo: String }, template: ` - @@ -97,11 +97,11 @@ app.component('my-component', { ``` -## Multiple `v-model` bindings +## 複数の `v-model` のバインディング -By leveraging the ability to target a particular prop and event as we learned before with [`v-model` arguments](#v-model-arguments), we can now create multiple v-model bindings on a single component instance. +以前 [`v-model` 引数](#v-model-arguments) で学習した特定のプロップとイベントをターゲットにする機能を活用することで、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。 -Each v-model will sync to a different prop, without the need for extra options in the component: +それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロップに同期します。 ```html @@ -139,15 +139,17 @@ app.component('user-name', {

-## Handling `v-model` modifiers +## `v-model` 修飾子の処理 When we were learning about form input bindings, we saw that `v-model` has [built-in modifiers](/guide/forms.html#modifiers) - `.trim`, `.number` and `.lazy`. In some cases, however, you might also want to add your own custom modifiers. -Let's create an example custom modifier, `capitalize`, that capitalizes the first letter of the string provided by the `v-model` binding. +フォーム入力バインディングについて学習していたときに、 `v-model`に [組み込み修飾子](/guide/forms.html#modifiers) -`.trim` 、 `.number` 、および `.lazy` があることがわかりました。ただし、場合によっては、独自のカスタム修飾子を追加することもできます。 + +`v-model` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、`capitalize`を作成してみましょう。 -Modifiers added to a component `v-model` will be provided to the component via the `modelModifiers` prop. In the below example, we have created a component that contains a `modelModifiers` prop that defaults to an empty object. +コンポーネント `v-model` に追加された修飾子は、`modelModifiers` プロップを介してコンポーネントに提供されます。以下の例では、デフォルトで空のオブジェクトになる `modelModifiers` プロップを含むコンポーネントを作成しました。 -Notice that when the component's `created` lifecycle hook triggers, the `modelModifiers` prop contains `capitalize` and its value is `true` - due to it being set on the `v-model` binding `v-model.capitalize="bar"`. +コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロップには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。 ```html @@ -162,7 +164,7 @@ app.component('my-component', { } }, template: ` - `, @@ -172,7 +174,7 @@ app.component('my-component', { }) ``` -Now that we have our prop set up, we can check the `modelModifiers` object keys and write a handler to change the emitted value. In the code below we will capitalize the string whenever the `` element fires an `input` event. +プロップを設定したので、 `modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `` 要素が `input` イベントを発生させるたびに文字列を大文字にします。 ```html
@@ -215,7 +217,7 @@ app.component('my-component', { app.mount('#app') ``` -For `v-model` bindings with arguments, the generated prop name will be `arg + "Modifiers"`: +引数を持つ `v-model` バインディングの場合、生成されるプロップ名は `arg + "Modifiers"` になります。 ```html @@ -225,7 +227,7 @@ For `v-model` bindings with arguments, the generated prop name will be `arg + "M app.component('my-component', { props: ['foo', 'fooModifiers'], template: ` - `, From f16c2c2d9ac640ffc04d74cd25c98ad010aa8900 Mon Sep 17 00:00:00 2001 From: fussy113 Date: Mon, 21 Sep 2020 10:12:35 +0900 Subject: [PATCH 2/2] fix: apply feedback --- src/guide/component-custom-events.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index b0238cff..ad7a0d17 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -10,7 +10,7 @@ this.$emit('myEvent') ``` -ケバブケース(kebab-case)でリスナ名を作っても何も起こりません： +ケバブケース(kebab-case)でリスナ名を作っても何も起こりません: ```html @@ -32,15 +32,15 @@ app.component('custom-form', { ``` -ネイティブイベント（ `click` など）が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 +ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 -::: ヒント +::: tip コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。 ::: ### 発行されたイベントを検証する -プロップタイプの検証と同様に、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。 +プロパティの型検証と同様に、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。 検証を追加するために、イベントには、 `$emit` 呼び出しに渡された引数を受け取る関数が割り当てられ、イベントが有効かどうかを示す真偽値を返します。 @@ -70,12 +70,12 @@ app.component('custom-form', { ## `v-model` の引数 -デフォルトでは、コンポーネントの `v-model` はプロップとして `modelValue` を使用し、イベントとして `update：modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。 +デフォルトでは、コンポーネントの `v-model` はプロパティとして `modelValue` を使用し、イベントとして `update:modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。 ```html ``` -この場合、子コンポーネントは `foo` プロップを期待し、同期するために `update：foo` イベントを発行します。 +この場合、子コンポーネントは `foo` プロパティを期待し、同期するために `update:foo` イベントを発行します。 ```js const app = Vue.createApp({}) @@ -99,9 +99,9 @@ app.component('my-component', { ## 複数の `v-model` のバインディング -以前 [`v-model` 引数](#v-model-arguments) で学習した特定のプロップとイベントをターゲットにする機能を活用することで、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。 +以前 [`v-model` 引数](#v-model-arguments) で学習した特定のプロパティとイベントをターゲットにする機能を活用することで、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。 -それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロップに同期します。 +それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロパティに同期します。 ```html @@ -174,7 +174,7 @@ app.component('my-component', { }) ``` -プロップを設定したので、 `modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `` 要素が `input` イベントを発生させるたびに文字列を大文字にします。 +プロパティを設定したので、 `modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `` 要素が `input` イベントを発生させるたびに文字列を大文字にします。 ```html
@@ -217,7 +217,7 @@ app.component('my-component', { app.mount('#app') ``` -引数を持つ `v-model` バインディングの場合、生成されるプロップ名は `arg + "Modifiers"` になります。 +引数を持つ `v-model` バインディングの場合、生成されるプロパティ名は `arg + "Modifiers"` になります。 ```html