Vue一个案例引发的递归组件的使用详解

list: [{
 name: \"经济\",
 children: [{
  name: \"如家\"
 }, {
  name: \"7天\"  
 }]
}, {
 name: \"舒适\",
 children: [{
  name: \"智选假日\"
 }, {
  name: \"全季\"  
 }]
}]

<div class=\"list-item\" v-for=\"(item, index) in list\" :key=\"index\">
 <div class=\"item-name\">
 <span>{{item.name}}</span>
 </div>
 <div v-if=\"item.children\" class=\"children-item\">
 <div v-for=\"(child, index) in item.children\" :key=\"index\">
  <div class=\"item-name\">
  <span>{{child.name}}</span>
  </div>
 </div>
 </div>
</div>

list: [{
 name: \"经济\",
 children: [{
  name: \"如家\",
  children: [{
   name: \"长江路-如家\"
  }, {
   name: \"望江路-如家\"  
  }]
 }, {
  name: \"7天\",
  children: [{
   name: \"长江路-7天\"
  }, {
   name: \"望江路-7天\"  
  }]
 }]
}]

<template>
 <div>
  <div class=\"list-item\" v-for=\"(item, index) in list\" :key=\"index\">
   <div class=\"item-name\">
    <span>{{item.name}}</span>
   </div>
   <div v-if=\"item.children\" class=\"children-item\">
    <list :list=\"item.children\"></list>
   </div>
  </div>
 </div>
</template>
< >
export default {
 name: \"List\",
 props: {
 list: Array
 }
};
</ >

<template>
 <div class=\"list-detail\">
  <list :list=\"list\"></list>
 </div>
</template>
< >
import List from \"./components/List\";
export default {
 name: \"Parent\",
 components: { List },
 data() {
 return {
  list: [{
   name: \"经济\",
   children: [{
    name: \"如家\",
    children: [{
     name: \"上江路-如家\"
    },
    {
     name: \"望江路-如家\"
    }]
   },{
    name: \"7天\",
    children: [{
     name: \"长江路-7天\"
    },
    {
     name: \"望江路-7天\"
    }]
   }]
  }]
 }
 }
}
</ >