vue 递归组件

HTML

<ul id="app">
  <x-area :item="data"></x-area>
</ul>

JavaScript

Vue.component('xArea', {
  name: 'x-area',
  props: {
  	item: Object
  },
  template: `<li>
          <span>{{item.name}}</span>
          <ul v-for="it in item.childs" v-if="item.childs">
            <x-area :item="it"></x-area>
          </ul>	
        </li>`
})

new Vue({
	el: '#app',
  data: {
  	data: {
      id: 1,
      name: '全国',
      childs: [
        {
          id: 2,
          name: '河南',
          childs: [{
            id: 3,
            name: '郑州',
            childs: [
              {
                id: 4,
                name: '金水区'
              },
              {
                id: 5,
                name: '中原区'
              },
              {
                id: 6,
                name: '郑东新区'
              }
            ]
          },{
            id: 7,
            name: '洛阳'
          }]
        },{
          id: 8,
          name: '河北'
        }
      ]
    }
  }
})