10
10
this .$emit (' myEvent' )
11
11
```
12
12
13
- ケバブケース(kebab-case)でリスナ名を作っても何も起こりません:
13
+ ケバブケース(kebab-case)でリスナ名を作っても何も起こりません:
14
14
15
15
``` html
16
16
<!-- Won't work -->
@@ -32,15 +32,15 @@ app.component('custom-form', {
32
32
```
33
33
34
34
35
- ネイティブイベント( ` click ` など)が ` emits ` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。
35
+ ネイティブイベント(例、 ` click ` など)が ` emits ` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。
36
36
37
- ::: ヒント
37
+ ::: tip
38
38
コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。
39
39
:::
40
40
41
41
### 発行されたイベントを検証する
42
42
43
- プロップタイプの検証と同様に 、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。
43
+ プロパティの型検証と同様に 、発行されたイベントは、配列構文ではなくオブジェクト構文で定義されている場合に検証できます。
44
44
45
45
検証を追加するために、イベントには、 ` $emit ` 呼び出しに渡された引数を受け取る関数が割り当てられ、イベントが有効かどうかを示す真偽値を返します。
46
46
@@ -70,12 +70,12 @@ app.component('custom-form', {
70
70
71
71
## ` v-model ` の引数
72
72
73
- デフォルトでは、コンポーネントの ` v-model ` はプロップとして ` modelValue ` を使用し、イベントとして ` update: modelValue ` を使用します。` v-model ` 引数を渡してこれらの名前の変更が出来ます。
73
+ デフォルトでは、コンポーネントの ` v-model ` はプロパティとして ` modelValue ` を使用し、イベントとして ` update: modelValue ` を使用します。` v-model ` 引数を渡してこれらの名前の変更が出来ます。
74
74
75
75
``` html
76
76
<my-component v-model:foo =" bar" ></my-component >
77
77
```
78
- この場合、子コンポーネントは ` foo ` プロップを期待し 、同期するために ` update: foo ` イベントを発行します。
78
+ この場合、子コンポーネントは ` foo ` プロパティを期待し 、同期するために ` update: foo ` イベントを発行します。
79
79
80
80
``` js
81
81
const app = Vue .createApp ({})
@@ -99,9 +99,9 @@ app.component('my-component', {
99
99
100
100
## 複数の ` v-model ` のバインディング
101
101
102
- 以前 [ ` v-model ` 引数] ( #v-model-arguments ) で学習した特定のプロップとイベントをターゲットにする機能を活用することで 、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。
102
+ 以前 [ ` v-model ` 引数] ( #v-model-arguments ) で学習した特定のプロパティとイベントをターゲットにする機能を活用することで 、単一のコンポーネントインスタンスに対して、複数の v-model バインディングを作成できるようになりました。
103
103
104
- それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロップに同期します 。
104
+ それぞれの v-model は、コンポーネントに追加オプションを必要とせず、異なるプロパティに同期します 。
105
105
106
106
``` html
107
107
<user-name
@@ -147,9 +147,9 @@ When we were learning about form input bindings, we saw that `v-model` has [buil
147
147
148
148
` v-model ` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、` capitalize ` を作成してみましょう。
149
149
150
- コンポーネント ` v-model ` に追加された修飾子は、` modelModifiers ` プロップを介してコンポーネントに提供されます 。以下の例では、デフォルトで空のオブジェクトになる ` modelModifiers ` プロップを含むコンポーネントを作成しました 。
150
+ コンポーネント ` v-model ` に追加された修飾子は、` modelModifiers ` プロパティを介してコンポーネントに提供されます 。以下の例では、デフォルトで空のオブジェクトになる ` modelModifiers ` プロパティを含むコンポーネントを作成しました 。
151
151
152
- コンポーネントの ` created ` ライフサイクルフックがトリガーされると、` modelModifiers ` プロップには ` capitalize ` が含まれ、その値は` true ` になります。これは、 ` v-model ` バインディングに ` v-model.capitalize = "var" ` が設定されているためです。
152
+ コンポーネントの ` created ` ライフサイクルフックがトリガーされると、` modelModifiers ` プロパティには ` capitalize ` が含まれ、その値は` true ` になります。これは、 ` v-model ` バインディングに ` v-model.capitalize = "var" ` が設定されているためです。
153
153
154
154
``` html
155
155
<my-component v-model.capitalize =" bar" ></my-component >
@@ -174,7 +174,7 @@ app.component('my-component', {
174
174
})
175
175
```
176
176
177
- プロップを設定したので 、 ` modelModifiers ` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 ` <input /> ` 要素が ` input ` イベントを発生させるたびに文字列を大文字にします。
177
+ プロパティを設定したので 、 ` modelModifiers ` オブジェクトのキーを確認し、発行された値を変更するハンドラーを記述できます。以下のコードでは、 ` <input /> ` 要素が ` input ` イベントを発生させるたびに文字列を大文字にします。
178
178
179
179
``` html
180
180
<div id =" app" >
@@ -217,7 +217,7 @@ app.component('my-component', {
217
217
app .mount (' #app' )
218
218
```
219
219
220
- 引数を持つ ` v-model ` バインディングの場合、生成されるプロップ名は ` arg + "Modifiers" ` になります。
220
+ 引数を持つ ` v-model ` バインディングの場合、生成されるプロパティ名は ` arg + "Modifiers" ` になります。
221
221
222
222
``` html
223
223
<my-component v-model:foo.capitalize =" bar" ></my-component >
0 commit comments