快速学会简单tree组件

/*
// 模拟数据
treeData: [{
          name: '经济',
          id: 100,
          children: [{
            id: 1,
            name: '如家',
            children: [{
              id: 2,
              name: '长江路-如家'
            }, {
              id: 3,
              name: '望江路-如家'
            }]
          }, {
            name: '7天',
            id: 4,
            children: [{
              id: 5,
              name: '长江路-7天'
            }, {
              id: 6,
              name: '望江路-7天'
            }]
          }]
        }, {
          name: '经济2',
          id: 1002,
          children: [
            {
              id: 12,
              name: '如家2',
              children: [{
                id: 22,
                name: '长江路-如家2'
              }, {
                id: 32,
                name: '望江路-如家2'
              }]
            }, {
              name: '7天2',
              id: 42,
              children: [{
                id: 52,
                name: '长江路-7天2'
              }, {
                id: 62,
                name: '望江路-7天2'
              }]
            }]
        }]
*/


<template>
  <div>
    <div v-for="item in treeData" :key="item.id">
      <span>
        {{ item.name }}
      </span>
      <tree
        v-if="item.children"
        style="margin-left: 20px;"
        :list-data="item.children"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tree',
    components: {},
    props:['listData']
  };
</script>