关于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/