Skip to content

Commit f16c2c2

Browse files
committed
fix: apply feedback
1 parent ae5c2c7 commit f16c2c2

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/guide/component-custom-events.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
this.$emit('myEvent')
1111
```
1212

13-
ケバブケース(kebab-case)でリスナ名を作っても何も起こりません
13+
ケバブケース(kebab-case)でリスナ名を作っても何も起こりません:
1414

1515
```html
1616
<!-- Won't work -->
@@ -32,15 +32,15 @@ app.component('custom-form', {
3232
```
3333

3434

35-
ネイティブイベント( `click` など)が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。
35+
ネイティブイベント(例、 `click` など)が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。
3636

37-
::: ヒント
37+
::: tip
3838
コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。
3939
:::
4040

4141
### 発行されたイベントを検証する
4242

43-
プロップタイプの検証と同様に、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。
43+
プロパティの型検証と同様に、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。
4444

4545
検証を追加するために、イベントには、 `$emit` 呼び出しに渡された引数を受け取る関数が割り当てられ、イベントが有効かどうかを示す真偽値を返します。
4646

@@ -70,12 +70,12 @@ app.component('custom-form', {
7070

7171
## `v-model` の引数
7272

73-
デフォルトでは、コンポーネントの `v-model` はプロップとして `modelValue` を使用し、イベントとして `updatemodelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。
73+
デフォルトでは、コンポーネントの `v-model` はプロパティとして `modelValue` を使用し、イベントとして `update:modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。
7474

7575
```html
7676
<my-component v-model:foo="bar"></my-component>
7777
```
78-
この場合、子コンポーネントは `foo` プロップを期待し、同期するために `updatefoo` イベントを発行します。
78+
この場合、子コンポーネントは `foo` プロパティを期待し、同期するために `update:foo` イベントを発行します。
7979

8080
```js
8181
const app = Vue.createApp({})
@@ -99,9 +99,9 @@ app.component('my-component', {
9999

100100
## 複数の `v-model` のバインディング
101101

102-
以前 [`v-model` 引数](#v-model-arguments) で学習した特定のプロップとイベントをターゲットにする機能を活用することで、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。
102+
以前 [`v-model` 引数](#v-model-arguments) で学習した特定のプロパティとイベントをターゲットにする機能を活用することで、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。
103103

104-
それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロップに同期します
104+
それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロパティに同期します
105105

106106
```html
107107
<user-name
@@ -147,9 +147,9 @@ When we were learning about form input bindings, we saw that `v-model` has [buil
147147

148148
`v-model` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、`capitalize`を作成してみましょう。
149149

150-
コンポーネント `v-model` に追加された修飾子は、`modelModifiers` プロップを介してコンポーネントに提供されます。以下の例では、デフォルトで空のオブジェクトになる `modelModifiers` プロップを含むコンポーネントを作成しました
150+
コンポーネント `v-model` に追加された修飾子は、`modelModifiers` プロパティを介してコンポーネントに提供されます。以下の例では、デフォルトで空のオブジェクトになる `modelModifiers` プロパティを含むコンポーネントを作成しました
151151

152-
コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロップには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。
152+
コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロパティには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。
153153

154154
```html
155155
<my-component v-model.capitalize="bar"></my-component>
@@ -174,7 +174,7 @@ app.component('my-component', {
174174
})
175175
```
176176

177-
プロップを設定したので`modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `<input />` 要素が `input` イベントを発生させるたびに文字列を大文字にします。
177+
プロパティを設定したので`modelModifiers` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 `<input />` 要素が `input` イベントを発生させるたびに文字列を大文字にします。
178178

179179
```html
180180
<div id="app">
@@ -217,7 +217,7 @@ app.component('my-component', {
217217
app.mount('#app')
218218
```
219219

220-
引数を持つ `v-model` バインディングの場合、生成されるプロップ名は `arg + "Modifiers"` になります。
220+
引数を持つ `v-model` バインディングの場合、生成されるプロパティ名は `arg + "Modifiers"` になります。
221221

222222
```html
223223
<my-component v-model:foo.capitalize="bar"></my-component>

0 commit comments

Comments
 (0)