$emit不觸發的原因

最近發現一個問題

$emit的方法，在父組件中不觸發，代碼是這樣寫的，

標紅的這行這個方法不執行

Vue.component('component_tan_checke', {
    props: ['public_checke'],
    template: '<div class="dialog" v-show="public_checke" >' +
        '<div class="weui_mask"></div>' +
        '<div class="weui_dialog">' +
        '<img src="/static/emergency/frontend/img/close.png" alt="" class="close" @click="$emit(\'off\')">' +
        '<div class="tan_area">' +
        '<div class="tan_tit"><img src="/static/emergency/frontend/img/g-ico-bell.png">提示</div>' +
        '<div class="tan_tip">' +
        '<div class="ts-note">是否通過審核？</div>' +
        '<div class="tan_btns">' +
        '<input class="btns btn-cancel" type="button" value="通過" @click="$emit(\'adopt\')">' +
        '<input class="btns btn-sure" type="button" value="不通過" @click="$emit(\'noAdopt\')">' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>',
    data: function () {
        return {
            public_checke: false,
        }
    },
})

問題找到了，

$emit傳入的事件名稱只能使用小寫，不能使用大寫的駝峰規則命名

改成

@click="$emit(\'noadopt\')"

就合適了

敲重點：

$emit不能用駝峰規則命名

$emit不能用駝峰規則命名

$emit不能用駝峰規則命名