$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不能用驼峰规则命名