vue递归后的组件点击事件不起作用

Question

为什么递归后@click="selItem(item)"事件就无效了

<template>
  <span class="menu">
    <ul v-if="data && data.length">
      <li v-for="item in data" :key="item.id" @mouseenter="handleItem(item)">
        {{ item.label }}
        <span>
          <i class="el-icon-plus" @click="selItem(item)">+</i>
        </span>
      </li>
    </ul>
    <list v-if="sublist && sublist.length" :data="sublist">
    </list>
  </span>
</template>

<script>
import item from './item'
export default {
  name: 'list',
  props: {
    data: Array
  },
  components: {
    item
  },
  data () {
    return {
      sublist: []
    }
  },
  watch: {
    data () {
      this.sublist = []
    }
  },
  methods: {
    handleItem (item) {
      this.sublist = item.children
    },
    selItem (item) {
      this.$emit('select-item', item)
    },
    subItem (item) {
      console.log(item)
      this.$emit('select-item', item)
    }
  }
}
</script>

<style lang="less" scope>
.menu {
  width: 100%;
  ul {
    display: inline-block;
    min-width: 100px;
    height: 180px;
    margin: 0;
    padding: 5px 0!important;
    vertical-align: top;
    list-style: none;
    border-right: 1px solid #e9eaec;
    overflow: auto;
    height: 200px;
    overflow: auto;
    width: 33%;
    li {
      list-style: none;
      font-size: 12px;
      padding: 5px 15px;
      cursor: pointer;
      i {
        float: right;
        cursor: pointer;
      }
    }
  }
}
</style>

Answer 1

selItem (item) {

  this.$emit('select-item', item)
},

后，父组件要监听"select_item 事件。

Answer 2

你好，问题解决了嘛

Answer 3

递归的<list>上也加上`
this.$emit('select-item', item)