发出了 Vue 事件，但没有收到答案

【问题标题】：Vue event was emitted, but wasn't received发出了 Vue 事件，但没有收到
【发布时间】：2018-06-23 13:06:26
【问题描述】：

我有一个包含一个父对象和一个组件（寻呼机）的 Typescript + Vue 应用程序：

//pager.ts
@Component({
    name: "pager",
    template: require("text!./pager.html")
})
export default class Pager extends Vue {
    onClick(pageIndex: number) : void{
        this.$emit("pageClick", pageIndex);
    }
}

<!-- pager.html -->
<div id="pager" class="text-center" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <a v-on:click="onClick(1)">
        1
    </a>
</div>

父vue和html文件：

// main.ts
this.vue = new Vue( {
    el: "#log-container",
    components:{
        pager: Pager
    },
    methods: {
        loadFromServer(pageIndex: number) : void
        {
            // do thing
        }
    },
    created(){
        // it workes
        this.loadFromServer(1);
    }
});

<!-- main.html -->
<div id="log-container">
    <pager v-on:page-click="loadFromServer">
    </pager>
</div>

所以问题是我看到事件已成功发出，但主 Vue 对象没有收到它，并且没有调用 loadFromServer 方法。

还有：

这个方法在created内部也有调用，调用正确
如果我将v-on:page-click="loadFromServer" 更改为v-on:page-click="somethingElse"，我会看到方法somethingElse 不存在的Vue 错误。所以看起来 Vue 也能正确解析我的所有内容。

尽管 loadFromServer 没有被调用。

【问题讨论】：

我发现最好完全避免在事件中使用 camelCase。尝试发出 page-click 代替。
... 它有效。我怎么也想不通。我们应该在代码中使用骆驼大小写，在 Vue 的 HTML 中使用 kebab 大小写，不是吗？如果我在所有情况下都使用camelCase，它最有趣的部分是不起作用的。谢谢！
大小写逻辑包含在the docs中。
@Nit，谢谢！看起来我错过了这一点。

标签： typescript vue.js vuejs2 vue-component

【解决方案1】：

感谢@Bert，正确的答案是在事件发出时使用 kebab-case。

【讨论】：