Vue 父组件监听不到子组件传递的事件

在看 Vue 官方文档的时候，做了一个小例子，发现父组件监听子组件抛出的事件死活监听不了，也不报错！
父组件：

<div id="app">
    <text-document
        :title="title"
        @changeText="changeTextFun"
    ></text-document>
</div>
let VM = new Vue({
    el: "#app",
    data: {
        title: 'this is the title'
    },
    methods: {
        changeTextFun: function (val) {
            console.log(val)
        }
    }
})

子组件：

Vue.component('text-document', {
    props: ['title'],
    data: function () {
        return {
            ownTitle: this.title,
            otherWords: 'this is other words'
        }
    },
    template: `
        <div>
        <p>{{ ownTitle }}</p>
        <button
            @click="$emit('changeText', 10)"
        >Change Text</button>
        </div>
    `
})

在我往回看的时候找到了问题所在，这是官网给的答案：

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到

HTML 是大小写不敏感的，它会将所有大写转换为小写，所以永远监听不到子组件的 changeText 事件，因此：

因此，我们推荐你始终使用 kebab-case 的事件名。

Vue 父组件监听不到子组件传递的事件

推荐阅读更多精彩内容