1 自定义事件
在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。
2 自定义事件的 3 个使用步骤
在封装组件时：
① 声明自定义事件
② 触发自定义事件
在使用组件时：
③ 监听自定义事件
2.1 声明自定义事件
开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明。
<template> <div> <h3>Counter 组件</h3> <button> +1 </button> </div> </template> <script> export default { name: 'Counter', // Counter 组件的自定义事件必须事先声明到 emits 节点中 emits: ['change'] } </script> <style> </style>
2.2 触发自定义事件
在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发。
<template> <div> <h3>Counter 组件</h3> <p>{{ count }}</p> <button @click="add"> +1 </button> </div> </template> <script> export default { name: 'Counter', data() { return { count: 0 } }, // Counter 组件的自定义事件必须事先声明到 emits 节点中 emits: ['change'], methods: { // 当点击 +1 按钮时，调用 add 方法，this.$emit( 'change' ) 触发change事件 add() { this.count++ this.$emit( 'change' ) } } } </script> <style> </style>
2.3 监听自定义事件
在使用自定义的组件时，可以通过 v-on 的形式监听自定义事件。
<template> <div> <h1>App 组件</h1> <counter @change="getCount"></counter> </div> </template> <script> import Counter from './Counter.vue' export default { name: 'App', components: { Counter }, methods: { getCount() { console.log('监听到了change事件') } } } </script> <style> </style>
3 自定义事件传参
在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参。
<template> <div> <h3>Counter 组件</h3> <p>{{ count }}</p> <button @click="add"> +1 </button> </div> </template> <script> export default { name: 'Counter', data() { return { count: 0 } }, // Counter 组件的自定义事件必须事先声明到 emits 节点中 emits: ['change'], methods: { // 当点击 +1 按钮时，调用 add 方法，this.$emit( 'change' ) 触发change事件 add() { this.count++ // 触发自定义事件，并且传参 this.$emit( 'change', this.count ) } } } </script> <style> </style>
在App组件中监听change事件，接收参数。
<template> <div> <h1>App 组件</h1> <p> App-counter: {{ count }} </p> <counter @change="getCount"></counter> </div> </template> <script> import Counter from './Counter.vue' export default { name: 'App', data() { return { count: 0 } }, components: { Counter }, methods: { // 监听change事件，并接收参数 getCount( sonCount ) { console.log('监听到了change事件') this.count = sonCount } } } </script> <style> </style>
