Vue的自定义事件

• 子组件中，选择click或其他原生事件来封装
• 父组件中，使用v-on/@绑定事件监听器

自定义事件是自定义组件才有的。
自定义事件其实就是封装DOM原生事件，如何封装？——就是在原生事件的回调中发射（emit）一个自定义事件。
下面就是具体操作：

子组件中，选择click或其他原生事件来封装

// 自定义组件boringButton.vue

<template>
    <button v-on:click="incrementHandler">{
  { counter }}</button>
</template>
<script>
    export default {
        name: 'boring-button',
        methods: {
            incrementHandler: function () {
                this.counter += 1;
               this.$emit('increment');
            }
        }
    }
</script>

父组件中，使用v-on/@绑定事件监听器

// 引用boringButton.vue的文件

<template>
    <!-- 注意increment的大小写和emit的保持一致，要一毛一样才行 -->
    <boringButton @increment='incrementTotal'></boringButton>
</template>

<script>
    methods: {
        incrementTotal: function () {
            console.log('I increment the boringButton!');
        }
   }
</script>