File tree Expand file tree Collapse file tree 1 file changed +9
-3
lines changed Expand file tree Collapse file tree 1 file changed +9
-3
lines changed Original file line number Diff line number Diff line change @@ -215,7 +215,9 @@ app.component('blog-post', {
215
215
問題は、このボタンが何もしないことです:
216
216
217
217
``` html
218
- <button >Enlarge text</button >
218
+ <button >
219
+ Enlarge text
220
+ </button >
219
221
```
220
222
221
223
ボタンをクリックすると、全ての投稿のテキストを拡大する必要があることを親に伝える必要があります。親は、ネイティブ DOM イベントでの場合と同様に、 ` v-on ` や ` @ ` を用いて子コンポーネントのインスタンスでのイベントを購読することができます:
@@ -227,7 +229,9 @@ app.component('blog-post', {
227
229
そして子コンポーネントはビルトインの [ ** ` $emit ` ** メソッド] ( ../api/instance-methods.html#emit ) にイベントの名前を渡して呼び出すことで、イベントを送出することができます:
228
230
229
231
``` html
230
- <button @click =" $emit('enlarge-text')" >Enlarge text</button >
232
+ <button @click =" $emit('enlarge-text')" >
233
+ Enlarge text
234
+ </button >
231
235
```
232
236
233
237
親コンポーネントは ` v-on:enlarge-text="postFontSize += 0.1" ` リスナーによって、このイベントを受け取り ` postFontSize ` を更新することができます。
@@ -364,7 +368,9 @@ app.component('custom-input', {
364
368
HTML 要素のように、コンポーネントに要素を渡すことができると便利なことがよくあります。例えば以下の通り:
365
369
366
370
``` html
367
- <alert-box > Something bad happened. </alert-box >
371
+ <alert-box >
372
+ Something bad happened.
373
+ </alert-box >
368
374
```
369
375
370
376
これは以下のように描画されるでしょう。:
You can’t perform that action at this time.
0 commit comments