fix: add an emits option to examples that emit events (#705)

Author: skirtles-code

src/api/instance-methods.md

@@ -222,6 +222,7 @@
   })
 
   app.component('welcome-button', {
+    emits: ['welcome'],
     template: `
       <button v-on:click="$emit('welcome')">
         Click me to be welcomed
@@ -236,7 +237,7 @@
 
   ```html
   <div id="emit-example-argument">
-    <advice-component v-on:give-advice="showAdvice"></advice-component>
+    <advice-component v-on:advise="showAdvice"></advice-component>
   </div>
   ```
 
@@ -250,6 +251,7 @@
   })
 
   app.component('advice-component', {
+    emits: ['advise'],
     data() {
       return {
         adviceText: 'Some advice'
@@ -258,12 +260,14 @@
     template: `
       <div>
         <input type="text" v-model="adviceText">
-        <button v-on:click="$emit('give-advice', adviceText)">
+        <button v-on:click="$emit('advise', adviceText)">
           Click me for sending advice
         </button>
       </div>
     `
   })
+  
+  app.mount('#emit-example-argument')
   ```
 
 - **See also:**

src/guide/component-basics.md

@@ -303,6 +303,7 @@ Here's that in action:
 ```js
 app.component('custom-input', {
   props: ['modelValue'],
+  emits: ['update:modelValue'],
   template: `
     <input
       :value="modelValue"
@@ -327,6 +328,7 @@ Keep in mind, the `get` method should return the `modelValue` property, or which
 ```js
 app.component('custom-input', {
   props: ['modelValue'],
+  emits: ['update:modelValue'],
   template: `
     <input v-model="value">
   `,

src/guide/component-custom-events.md

@@ -90,12 +90,11 @@ By default, `v-model` on a component uses `modelValue` as the prop and `update:m
 In this case, child component will expect a `title` prop and emits `update:title` event to sync:
 
 ```js
-const app = Vue.createApp({})
-
 app.component('my-component', {
   props: {
     title: String
   },
+  emits: ['update:title'],
   template: `
     <input 
       type="text"
@@ -123,13 +122,12 @@ Each v-model will sync to a different prop, without the need for extra options i
 ```
 
 ```js
-const app = Vue.createApp({})
-
 app.component('user-name', {
   props: {
     firstName: String,
     lastName: String
   },
+  emits: ['update:firstName', 'update:lastName'],
   template: `
     <input 
       type="text"
@@ -157,7 +155,7 @@ Modifiers added to a component `v-model` will be provided to the component via t
 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"`.
 
 ```html
-<my-component v-model.capitalize="bar"></my-component>
+<my-component v-model.capitalize="myText"></my-component>
 ```
 
 ```js
@@ -168,6 +166,7 @@ app.component('my-component', {
       default: () => ({})
     }
   },
+  emits: ['update:modelValue'],
   template: `
     <input type="text" 
       :value="modelValue"
@@ -204,6 +203,7 @@ app.component('my-component', {
       default: () => ({})
     }
   },
+  emits: ['update:modelValue'],
   methods: {
     emitValue(e) {
       let value = e.target.value
@@ -225,19 +225,20 @@ app.mount('#app')
 For `v-model` bindings with arguments, the generated prop name will be `arg + "Modifiers"`:
 
 ```html
-<my-component v-model:foo.capitalize="bar"></my-component>
+<my-component v-model:description.capitalize="myText"></my-component>
 ```
 
 ```js
 app.component('my-component', {
-  props: ['foo', 'fooModifiers'],
+  props: ['description', 'descriptionModifiers'],
+  emits: ['update:description'],
   template: `
     <input type="text" 
-      :value="foo"
-      @input="$emit('update:foo', $event.target.value)">
+      :value="description"
+      @input="$emit('update:description', $event.target.value)">
   `,
   created() {
-    console.log(this.fooModifiers) // { capitalize: true }
+    console.log(this.descriptionModifiers) // { capitalize: true }
   }
 })
 ```

src/guide/list.md

@@ -345,7 +345,8 @@ app.component('todo-item', {
       <button @click="$emit('remove')">Remove</button>
     </li>
   `,
-  props: ['title']
+  props: ['title'],
+  emits: ['remove']
 })
 
 app.mount('#todo-list-example')

src/guide/migration/v-model.md

@@ -173,6 +173,7 @@ We recommend:
     props: {
       modelValue: String // previously was `value: String`
     },
+    emits: ['update:modelValue'],
     methods: {
       changePageTitle(title) {
         this.$emit('update:modelValue', title) // previously was `this.$emit('input', title)`

src/guide/render-function.md

@@ -274,6 +274,7 @@ The `v-model` directive is expanded to `modelValue` and `onUpdate:modelValue` pr
 
 ```js
 props: ['modelValue'],
+emits: ['update:modelValue'],
 render() {
   return Vue.h(SomeComponent, {
     modelValue: this.modelValue,