Vue 递归组件

对于子组件相同但不确定是几层 for 循环的时候，可以递归引用组件，就是在组件中引用自身。注意要命名 name。

 

示例代码：（根据标签data显示UI)

递归组件recursion-view.vue

<template>
  <view class="recursion-view" :style="[views.css]">
    <block v-if="views.views && views.views.length > 0">
      <block v-for="(item, index) in views.views" :key="index">
        <block v-if="item.type == 'view'">
          <RecursionView :views="item" />
        </block>
        <text v-else-if="item.type == 'text'" :style="[item.css]">{{ item.text }}</text>
        <image class="image-view" :src="item.src" v-else-if="item.type == 'image'" mode="heightFix" :style="[item.css]" />
      </block>
    </block>
  </view>
</template>

<script>
import RecursionView from './recursion-view.vue'
export default {
  name: 'RecursionView',
  components: {
    RecursionView
  },
  props: {
    views: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.recursion-view {
  box-sizing: border-box;
}

.image-view {
  width: 96rpx;
}
</style>

组件的使用

<template>
  <view class="show-content">
    <RecursionView :views="views" />
  </view>
</template>

<script>
import RecursionView from './recursion-view.vue'

export default {
  components: {
    RecursionView
  },
  data () {
    return {
      views: {
        type: 'view',
        css: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          height: '34rpx',
        },
        views: [
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '收款时间：'
              },
              {
                type: 'text',
                text: info.repairTime,
                css: {
                  fontWeight: 'bold',
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              width: '236rpx'
            },
            views: [
              {
                type: 'text',
                text: '收据编号：'
              },
              {
                type: 'text',
                text: info.number,
                css: {
                  fontWeight: 'bold',
                }
              }
            ]
          }
        ]
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.show-content {
  border-radius: 16rpx;
  background-color: #ffffff;
  overflow: hidden;
}
</style>