2021-10-21

vue 实现组件递归（嵌套自身）

vue和uniapp实现不一样
vue 实现组件递归
主要使用到了 组件中的name, 当我们设置了组件的name，组件递归调用自身使用的组件名为name；

<template>
    <view class="tree-index">
        <view class="tree-list" v-for="(item, index) in treeList" :key="index">
            <view class="tree-title">
                {{item.tracingName}}
            </view>
            <view class="tree-desc">
                {{item.dataDetail}}
            </view>
            
            <view class="children" v-if="item.children && item.children.length != 0">
                <treeItem :treeList="item.children"></treeItem>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'treeItem',
        props: {
            treeList: {
                default:function(){
                    return []
                }
            }
        },
    }
</script>

<style  scoped>
 .tree-list {
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     padding: 20rpx 0;
 }
 .tree-list:last-child {
     border-bottom: 0;
 }
 .tree-title {
     font-family: MicrosoftYaHeiSemilight;
     font-size: 28rpx;
     line-height: 28rpx;
     font-weight: normal;
     font-stretch: normal;
     letter-spacing: 0rpx;
     color: #11142c;
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
     width: 100%;
     margin-bottom: 20rpx;
 }
 .tree-desc {
     font-family: MicrosoftYaHeiSemibold;
     font-size: 28rpx;
     line-height: 36rpx;
     font-weight: normal;
     font-stretch: normal;
     letter-spacing: 0rpx;
     color: #11142c;
     font-weight: bold;
     
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
 }
.children {
  padding-left: 20rpx;
}
</style>

uni-app微信小程序
使用方法和在vue中不一样，不能直接使用name引入，需要在组件中再次引用
注：在递归引用的时候要增加跳出递归的判断，不然会报错v-if=""

<template>
    <view class="tree-index">
        <view class="tree-list" v-for="(item, index) in treeList" :key="index">
            <view class="tree-title">
                {{item.tracingName}}
            </view>
            <view class="tree-desc">
                {{item.dataDetail}}
            </view>
            
            <view class="children" v-if="item.children && item.children.length != 0">
                <treeItem :treeList="item.children"></treeItem>
            </view>
        </view>
    </view>
</template>

<script>
    import treeItem from '@/components/tree-item.vue'
    export default {
        name: 'treeItem',
        props: {
            treeList: {
                default:function(){
                    return []
                }
            }
        },
        components: {
            treeItem
        }
    }
</script>

<style  scoped>
 .tree-list {
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     padding: 20rpx 0;
 }
 .tree-list:last-child {
     border-bottom: 0;
 }
 .tree-title {
     font-family: MicrosoftYaHeiSemilight;
     font-size: 28rpx;
     line-height: 28rpx;
     font-weight: normal;
     font-stretch: normal;
     letter-spacing: 0rpx;
     color: #11142c;
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
     width: 100%;
     margin-bottom: 20rpx;
 }
 .tree-desc {
     font-family: MicrosoftYaHeiSemibold;
     font-size: 28rpx;
     line-height: 36rpx;
     font-weight: normal;
     font-stretch: normal;
     letter-spacing: 0rpx;
     color: #11142c;
     font-weight: bold;
     
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
 }
.children {
  padding-left: 20rpx;
}
</style>