vue——15-vue中的触发事件 this.$emit( 事件名 )

<div id="enjoy">
    
    <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;
                    }
                }
            })
        }

在这里插入图片描述

你可能感兴趣的:(vue)