vue 组件调用组件自身，递归调用组件自身

父组件

<template>
    <div class="page-box">
        <!-- <child>
            <template v-slot:default="scope">
                <div>slot</div>
                <div>{{ scope.data1 }}</div>
            </template>
        </child> -->
        <table>
            <tr v-for="(item, key) in dataM" :key="key">
                <child :item="item" :label="key" />
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import child from './components/child.vue';

const dataM = {
    a: {
        b: {
            c: [234, 234, 234, 23, 42, 34, 23, 432423, 4, 2]
        }
    },
    a2: {
        b2: {
            c2: [234, 234, 234, 23, 42, 34, 23, 432423, 4, 2]
        }
    }
};
</script>

<style lang="scss">
table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    td {
        border: 1px solid #ddd;
        padding: 5px;
    }
}
</style>

子组件

<template>
    <template v-if="!Array.isArray(item)">
        <td>
            {{ label }}
        </td>
        <!-- 组件可以调用组件自身 -->
        <child v-for="(childItem, key, index) in item" :item="childItem" :label="key" :key="index" />
    </template>
    <template v-else>
        <td v-for="(childItem, index) in item" :key="index">
            {{ childItem }}
        </td>
    </template>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
// 定义组件名称
defineComponent({
    name: 'child'
});

interface Props {
    item: any;
    label: string | number;
}

const props = defineProps<Props>();

const item = computed(() => props.item);
const label = computed(() => props.label);

console.log(typeof item.value, 'item_type');

console.log(item, 'item');

const data1 = 'sldfjsldfjslkfjsfd';
</script>

<style lang="scss" scoped></style>

总结

vue 组件可以通过组件名称调用自身