8000 fix: add an emits option to examples that emit events (#705) · vuejs/docs@e554cd6 · GitHub
[go: up one dir, main page]
Skip to content

Commit e554cd6

Browse files
skirtles-codeskirtles-code
authored
fix: add an emits option to examples that emit events (#705)
1 parent ab3cb93 commit e554cd6

File tree

6 files changed

+23
-13
lines changed

6 files changed

+23
-13
lines changed

‎src/api/instance-methods.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,7 @@
222222
})
223223

224224
app.component('welcome-button', {
225+
emits: ['welcome'],
225226
template: `
226227
<button v-on:click="$emit('welcome')">
227228
Click me to be welcomed
@@ -236,7 +237,7 @@
236237

237238
```html
238239
<div id="emit-example-argument">
239-
<advice-component v-on:give-advice="showAdvice"></advice-component>
240+
<advice-component v-on:advise="showAdvice"></advice-component>
240241
</div>
241242
```
242243

@@ -250,6 +251,7 @@
250251
})
251252

252253
app.component('advice-component', {
254+
emits: ['advise'],
253255
data() {
254256
return {
255257
adviceText: 'Some advice'
@@ -258,12 +260,14 @@
258260
template: `
259261
<div>
260262
<input type="text" v-model="adviceText">
261-
<button v-on:click="$emit('give-advice', adviceText)">
263+
<button v-on:click="$emit('advise', adviceText)">
262264
Click me for sending advice
263265
</button>
264266
</div>
265267
`
266268
})
269+
270+
app.mount('#emit-example-argument')
267271
```
268272

269273
- **See also:**

‎src/guide/component-basics.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,7 @@ Here's that in action:
303303
```js
304304
app.component('custom-input', {
305305
props: ['modelValue'],
306+
emits: ['update:modelValue'],
306307
template: `
307308
<input
308309
:value="modelValue"
@@ -327,6 +328,7 @@ Keep in mind, the `get` method should return the `modelValue` property, or which
327328
```js
328329
app.component('custom-input', {
329330
props: ['modelValue'],
331+
emits: ['update:modelValue'],
330332
template: `
331333
<input v-model="value">
332334
`,

‎src/guide/component-custom-events.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,11 @@ By default, `v-model` on a component uses `modelValue` as the prop and `update:m
9090
In this case, child component will expect a `title` prop and emits `update:title` event to sync:
9191

9292
```js
93-
const app = Vue.createApp({})
94-
9593
app.component('my-component', {
9694
props: {
9795
title: String
9896
},
97+
emits: ['update:title'],
9998
template: `
10099
<input
101100
type="text"
@@ -123,13 +122,12 @@ Each v-model will sync to a different prop, without the need for extra options i
123122
```
124123

125124
```js
126-
const app = Vue.createApp({})
127-
128125
app.component('user-name', {
129126
props: {
130127
firstName: String,
131128
lastName: String
132129
},
130+
emits: ['update:firstName', 'update:lastName'],
133131
template: `
134132
<input
135133
type="text"
@@ -157,7 +155,7 @@ Modifiers added to a component `v-model` will be provided to the component via t
157155
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"`.
158156

159157
```html
160-
<my-component v-model.capitalize="bar"></my-component>
158+
<my-component v-model.capitalize="myText"></my-component>
161159
```
162160

163161
```js
@@ -168,6 +166,7 @@ app.component('my-component', {
168166
default: () => ({})
169167
}
170168
},
169+
emits: ['update:modelValue'],
171170
template: `
172171
<input type="text"
173172
:value="modelValue"
@@ -204,6 +203,7 @@ app.component('my-component', {
204203
default: () => ({})
205204
}
206205
},
206+
emits: ['update:modelValue'],
207207
methods: {
208208
emitValue(e) {
209209
let value = e.target.value
@@ -225,19 +225,20 @@ app.mount('#app')
225225
For `v-model` bindings with arguments, the generated prop name will be `arg + "Modifiers"`:
226226

227227
```html
228-
<my-component v-model:foo.capitalize="bar"></my-component>
228+
<my-component v-model:description.capitalize="myText"></my-component>
229229
```
230230

231231
```js
232232
app.component('my-component', {
233-
props: ['foo', 'fooModifiers'],
233+
props: ['description', 'descriptionModifiers'],
234+
emits: ['update:description'],
234235
template: `
235236
<input type="text"
236-
:value="foo"
237-
@input="$emit('update:foo', $event.target.value)">
237+
:value="description"
238+
@input="$emit('update:description', $event.target.value)">
238239
`,
239240
created() {
240-
console.log(this.fooModifiers) // { capitalize: true }
241+
console.log(this.descriptionModifiers) // { capitalize: true }
241242
}
242243
})
243244
```

‎src/guide/list.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,8 @@ app.component('todo-item', {
345345
<button @click="$emit('remove')">Remove</button>
346346
</li>
347347
`,
348-
props: ['title']
348+
props: ['title'],
349+
emits: ['remove']
349350
})
350351

351352
app.mount('#todo-list-example')

‎src/guide/migration/v-model.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ We recommend:
173173
props: {
174174
modelValue: String // previously was `value: String`
175175
},
176+
emits: ['update:modelValue'],
176177
methods: {
177178
changePageTitle(title) {
178179
this.$emit('update:modelValue', title) // previously was `this.$emit('input', title)`

‎src/guide/render-function.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,7 @@ The `v-model` directive is expanded to `modelValue` and `onUpdate:modelValue` pr
274274

275275
```js
276276
props: ['modelValue'],
277+
emits: ['update:modelValue'],
277278
render() {
278279
return Vue.h(SomeComponent, {
279280
modelValue: this.modelValue,

0 commit comments

Comments
 (0)
0