File tree Expand file tree Collapse file tree 3 files changed +12
-8
lines changed Expand file tree Collapse file tree 3 files changed +12
-8
lines changed Original file line number Diff line number Diff line change 192
192
```
193
193
194
194
``` js
195
- const app = Vue . createApp ({
195
+ const app = createApp ({
196
196
methods: {
197
197
sayHi () {
198
198
console .log (' Hi!' )
201
201
})
202
202
203
203
app .component (' welcome-button' , {
204
+ emits: [' welcome' ],
204
205
template: `
205
206
<button v-on:click="$emit('welcome')">
206
207
Click me to be welcomed
215
216
216
217
``` html
217
218
<div id =" emit-example-argument" >
218
- <advice-component v-on:give-advice =" showAdvice" ></advice-component >
219
+ <advice-component v-on:advise =" showAdvice" ></advice-component >
219
220
</div >
220
221
```
221
222
222
223
``` js
223
- const app = Vue . createApp ({
224
+ const app = createApp ({
224
225
methods: {
225
226
showAdvice (advice ) {
226
227
alert (advice)
229
230
})
230
231
231
232
app .component (' advice-component' , {
233
+ emits: [' advise' ],
232
234
data () {
233
235
return {
234
236
adviceText: ' Some advice'
237
239
template: `
238
240
<div>
239
241
<input type="text" v-model="adviceText">
240
- <button v-on:click="$emit('give-advice ', adviceText)">
242
+ <button v-on:click="$emit('advise ', adviceText)">
241
243
Click me for sending advice
242
244
</button>
243
245
</div>
244
246
`
245
247
})
248
+
249
+ app .mount (' #emit-example-argument' )
246
250
```
247
251
248
252
- ** See also:**
Original file line number Diff line number Diff line change @@ -233,7 +233,7 @@ app.component('blog-post', {
233
233
そして子コンポーネントはビルトインの [ ** ` $emit ` ** メソッド] ( ../api/instance-methods.html#emit ) にイベントの名前を渡して呼び出すことで、イベントを送出することができます:
234
234
235
235
``` html
236
- <button @click =" $emit('enlarge-text ')" >
236
+ <button @click =" $emit('enlargeText ')" >
237
237
Enlarge text
238
238
</button >
239
239
```
@@ -252,7 +252,7 @@ app.component('blog-post', {
252
252
``` js
253
253
app .component (' blog-post' , {
254
254
props: [' title' ],
255
- emits: [' enlarge-text ' ]
255
+ emits: [' enlargeText ' ]
256
256
})
257
257
```
258
258
@@ -263,7 +263,7 @@ app.component('blog-post', {
263
263
イベントを特定の値と一緒に送出すると便利な場合があります。例えば、テキストをどれだけ大きく表示するかを ` <blog-post> ` コンポーネントの責務とさせたいかもしれません。そのような場合、 ` $emit ` の第二引数を使ってこの値を渡すことができます:
264
264
265
265
``` html
266
- <button @click =" $emit('enlarge-text ', 0.1)" >
266
+ <button @click =" $emit('enlargeText ', 0.1)" >
267
267
Enlarge text
268
268
</button >
269
269
```
Original file line number Diff line number Diff line change @@ -27,7 +27,7 @@ this.$emit('myEvent')
27
27
28
28
``` js
29
29
app .component (' custom-form' , {
30
- emits: [' in-focus ' , ' submit' ]
30
+ emits: [' inFocus ' , ' submit' ]
31
31
})
32
32
```
33
33
You can’t perform that action at this time.
0 commit comments