未检测到来自子组件的事件

Question

基于 Vue 上的树视图示例 (https://vuejs.org/v2/examples/tree-view.html)，我将其代码重组如下： 在父组件中

<ul>
      <item class="item" :model="treeData" v-on:changeType="changeTypeEvent"></item>
</ul>
...
<script>
  ...
    methods: {
       changeTypeEvent: function () {
       console.log('Incoming event ' )
    }
 ...
</script>

在其子组件中，

<li>
  <div :class="{bold: isFolder}" @click="toggle" @dblclick.once="changeType">
        {{model.name}}
    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div>
  <ul v-show="open" v-if="isFolder">
    <item class="item" v-for="model in model.children" v-bind:key="model.name" :model="model">
        </item>
    <li class="add" @click="addChild">+</li>
  </ul>
  </li>
  ...
<script>
export default {
  name: 'item',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
       this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
   changeType: function () {
    if (!this.isFolder) {
      console.log('Double click ' + this.model.name)
      this.$emit('changeType')
    }
  },
 }
}
</script>

由于某种原因，在父组件中未检测到该事件。我有一个具有相同结构的工作代码。为什么在这种情况下它不起作用？

Answer 1

Html 属性名称不区分大小写 (https://www.w3.org/TR/2012/WD-html-markup-20120315/documents.html#case-insensitivity)，因此 Vue 将父级上的事件侦听器从模板的 pascal-case changeType 转换为 kebab-case change-type：

<ul>
      <item class="item" :model="treeData" v-on:change-type="changeTypeEvent"></item>
</ul>

Vue 文档：https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case