在看 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 的事件名。
