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

未检测到子组件中的事件

1 个答案: