vue2+ts中Emit装饰器的使用

<template>
    <section>
        <div class="list"
             @click="updateCount">派发update-count事件</div>
        <div class="list"
             @click="whatever">派发change事件</div>
        <div class="list"
             @click='multipleParams(1, 2)'>派发multipleParams事件</div>
    </section>
</template>

<script lang="ts">
    import { Vue, Component, Emit } from 'vue-property-decorator';

    @Component
    export default class EmitComponent extends Vue {
        // 原写法
        // methods: {
        //     updateCount() {
        //         this.count++;
        //         this.$emit('update-count', this.count);
        //     },

        //     whatever() {
        //         this.count++;
        //         this.$emit('change', this.count);
        //     }
        // }

        // Emit装饰器，表示下面的函数的结尾会派发一个事件
        // 如果Emit装饰器没有参数，则派发下面的函数名的kabeb-case，本例即update-count
        // 函数的return值会被当作emit的第一个额外参数派发
        // 函数的参数会被跟在第一个额外参数后面派发
        // 但是按原写法直接this.$emit也没什么问题

        private count = 0;
        @Emit()
        updateCount() {
            return this.count++;
        }

        // 如果Emit装饰器有参数，则派发参数
        @Emit('change')
        whatever() {
            return this.count++;
        }

        @Emit('multipleParams')
        multipleParams(param1, param2) {
            console.error(param1, param2);
            return param1 + param2;
        }
    }
</script>