Vue学习笔记 - 自定义事件

$emit

需要配合v-on来触发自定义事件

<div id="app">
    <mycomponent></mycomponent>
</div>
<script>  
var componentA = {
    data: function(){
        return{
            count: 0
        }
    },
    template: '<button @click="add" type="button">{{count}}</button>',
    methods: {
        add: function(){
            this.count++;
            // 触发自定义事件
            this.$emit('inset')
        }
    }
}
var componentB = {
    // 引用componentA组件
    components: {
        'mecomponent': componentA
    },
    template: `
        <div>
            <p>{{todo}}</p>
            // 自定义事件
            <mecomponent @inset="adds"></mecomponent>
            <mecomponent @inset="adds"></mecomponent>
        </div>
    
    `,
    data: function(){
        return{
            todo: 0
        }
    },
    methods: {
        adds: function(){
            this.todo++
        }
    }
}
new Vue({
    el: '#app',
    components: {
        // 引用componentB组件
        'mycomponent': componentB
    }
})
</script>