vue——15-vue中的自定义事件（组件传数据传递）

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82747187

<div id="enjoy">
    <!--
    使用$on(eventName)监听事件
    使用$emit(eventName)触发事件
    -->
    <my-btn @total="allcount()"></my-btn>
    <my-btn @total="allcount()"></my-btn>
    <my-btn @total="allcount()"></my-btn>

    <p>所有按钮一共点击了{{num}}次</p>
</div>

<template id="my_btn">
    <button @click="total()">点击了{{counter}}次</button>
</template>

        {
            //实例化
            Vue.component('my-btn', {
                template: '#my_btn',
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    total() {
                        this.counter += 1;

                        //通知外界调用了这个方法
                        this.$emit('total');
                    }
                }
            });


            new Vue({
                el: '#enjoy',
                data: {
                    num: 0
                },
                methods: {
                    allcount() {
                        this.num += 1;
                    }
                }
            })
        }