鍍金池/ 問答/HTML/ 關于vue中$emit事件不觸發(fā)問題

關于vue中$emit事件不觸發(fā)問題

<!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>

<script src="https://cdn.jsdelivr.net/npm/...;></script>
<script>

var Btn = Vue.extend({
    template:`
        <button @click="addCounter2()">已經(jīng)點擊過了幾次：{{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都不打印

回答
編輯回答
薔薇花

在HTML模板中，$emit傳入的自定義事件名稱全部小寫。

2018年7月18日 18:44
編輯回答
雨萌萌

打開控制臺，點擊按鈕，將警告看一下，你就明白了

2018年2月19日 06:57
編輯回答
厭遇

組件加載成功了嗎？

2018年7月5日 05:32