关于vue.js:vue递归组件自定义事件

对于递归组件只调用一次的问题，解决方案示例：

父组件：parent.vue

<template>
  <div id="app">
    <Tree :data="data" @nodeClick="nClick"></Tree>
  </div>
</template>

<script>
  import Tree from './components/tree.vue'
  export default {components: {Tree},
    name: 'app',
    data(){
      return {
        data: {
          'title': '111',
          'children': [
            {'title': '111-1'}, 
            {
              'title': '111-2',
              'children': [{'title': '111-2-1'}
              ]
            }
          ]
        }
      }
    },
    methods: {nClick(title){console.log(title)
      }
    }
  }
</script>

树状组件：components/tree.vue，在递归组件中再注册下自定义事件

<template>
  <ul class="tree">
    <li>
      <span v-html="data.title" @click="handleClick(data.title)"></span>
      <m-tree v-for="(item , idx) in data.children" :data="item" :key="idx" @nodeClick="outClick"></m-tree>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'mTree',
    props: {
      data: {
        type: Object,
        default (){return {}
        }
      }
    },
    methods: {handleClick(title){this.$emit('nodeClick',title);
      },
      outClick(title){this.$emit('nodeClick',title);
      }
    }
  }
</script>

欢送关注：http://fenxianglu.cn/