关于vue中$emit事件不触发问题

发布于
2018-02-06

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title></title>

</head>
<body>

<div id="app">
    <my-div v-on:addCounter="addAllCounter()"></my-div>
    <my-div @addCounter="addAllCounter()"></my-div>
    <my-div @addCounter="addAllCounter()"></my-div>
    <my-div @addCounter="addAllCounter()"></my-div>
    <my-div @addCounter="addAllCounter()"></my-div>
    <my-div @addCounter="addAllCounter()"></my-div>
    <p>一共点击过多少次 {{allCounter}}</p>
</div>

var Btn = Vue.extend({
    template:`
        <button @click="addCounter2()">已经点击过了几次：{{counter}}</button>
    `,
    data(){
        return {
            counter: 0
        }
    },
    methods:{
        addCounter2(){
            this.counter += 1;
            this.$emit('addCounter')
        }
    }
})

Vue.component('my-div', Btn);

new Vue({
    el: '#app',
    data:{
        allCounter: 0
    },
    methods:{
        addAllCounter(){
            console.log(111)
            this.allCounter += 1;
        }
    }
})

</script>
</body>
</html>

控制台111都不打印

javascript vue.js

阅读 6.8k

3 个回答

得票最新