-
Notifications
You must be signed in to change notification settings - Fork 87
docs: #15 Custom Eventsの翻訳 #64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: #15 Custom Eventsの翻訳 #64
Conversation
Deploy preview for vuejs-v3-ja-doc-preview ready! Built with commit f16c2c2 https://deploy-preview-64--vuejs-v3-ja-doc-preview.netlify.app |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
レビュー 👀 コメント 💬 しました!
対応お願いします!
src/guide/component-custom-events.md
Outdated
|
||
```js | ||
this.$emit('myEvent') | ||
``` | ||
|
||
Listening to the kebab-cased version will have no effect: | ||
ケバブケース(kebab-case)でリスナ名を作っても何も起こりません: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
細かいですが、 :
は :
でお願いします!
ケバブケース(kebab-case)でリスナ名を作っても何も起こりません: | |
ケバブケース(kebab-case)でリスナ名を作っても何も起こりません: |
src/guide/component-custom-events.md
Outdated
|
||
::: tip | ||
It is recommended to define all emitted events in order to better document how a component should work. | ||
ネイティブイベント( `click` など)が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(e.g.,
click)
は (例、
click)
でお願いします!
ネイティブイベント( `click` など)が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 | |
ネイティブイベント(例、`click` など)が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 |
src/guide/component-custom-events.md
Outdated
It is recommended to define all emitted events in order to better document how a component should work. | ||
ネイティブイベント( `click` など)が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 | ||
|
||
::: ヒント |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tip は訳さなくて大丈夫です!
src/guide/component-custom-events.md
Outdated
|
||
Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the Array syntax. | ||
プロップタイプの検証と同様に、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prop type validation
は訳すとしてた プロパティの型検証
ですね。
src/guide/component-custom-events.md
Outdated
|
||
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` 引数を渡してこれらの名前の変更が出来ます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prop
は `プロパティでお願いします!
デフォルトでは、コンポーネントの `v-model` はプロップとして `modelValue` を使用し、イベントとして `update:modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。 | |
デフォルトでは、コンポーネントの `v-model` はプロパティとして `modelValue` を使用し、イベントとして `update:modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。 |
src/guide/component-custom-events.md
Outdated
|
||
```html | ||
<my-component v-model:foo="bar"></my-component> | ||
``` | ||
|
||
In this case, child component will expect a `foo` prop and emits `update:foo` event to sync: | ||
この場合、子コンポーネントは `foo` プロップを期待し、同期するために `update:foo` イベントを発行します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
この場合、子コンポーネントは `foo` プロップを期待し、同期するために `update:foo` イベントを発行します。 | |
この場合、子コンポーネントは `foo` プロパティを期待し、同期するために `update:foo` イベントを発行します。 |
src/guide/component-custom-events.md
Outdated
|
||
Each v-model will sync to a different prop, without the need for extra options in the component: | ||
それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロップに同期します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロップに同期します。 | |
それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロパティに同期します。 |
src/guide/component-custom-events.md
Outdated
|
||
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"` が設定されているためです。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロップには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。 | |
コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロパティには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。 |
src/guide/component-custom-events.md
Outdated
@@ -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 `<input />` element fires an `input` event. | |||
プロップを設定したので、 `modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `<input />` 要素が `input` イベントを発生させるたびに文字列を大文字にします。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
プロップを設定したので、 `modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `<input />` 要素が `input` イベントを発生させるたびに文字列を大文字にします。 | |
プロパティを設定したので、 `modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `<input />` 要素が `input` イベントを発生させるたびに文字列を大文字にします。 |
src/guide/component-custom-events.md
Outdated
@@ -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"` になります。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
引数を持つ `v-model` バインディングの場合、生成されるプロップ名は `arg + "Modifiers"` になります。 | |
引数を持つ `v-model` バインディングの場合、生成されるプロパティ名は `arg + "Modifiers"` になります。 |
@kazupon |
@fussy113 |
翻訳ありがとうございました! |
resolve #15