递归组件 vue 【关键：组件定义 name】

对于一些有规律的 dom 结构，我们可以通过递归方式来生成这个结构，，那么在 vue 的模板中，我们能不能递归生成dom,答案是肯定的，在 vue 的组件中能够调用自己本身。

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

https://www.jianshu.com/p/ced0ea9c265c

 treeData: {
                name: "外层1",
                children: [
                    { name: "外层2-1" },
                    { name: "外层2-2" },
                    {
                        name: "外层2-3",
                        children: [
                            {
                                name: "外层3-1",
                                children: [{ name: "hello" }, { name: "wat" }],
                            },
                            { name: "外层3-2" },
                            { name: "外层3-3" },
                            {
                                name: "外层3-4",
                                children: [{ name: "hello" }, { name: "wat" }],
                            },
                        ],
                    },
                ],
            },

父组件：

<child :model="treeData"> </child>

子组件：

<template>

<div>
        <ul>
            <li v-for="(itemchild, index) in model.children" :key="index">
                <p>{{ itemchild.name }}</p>
                <tree :model="itemchild"></tree>
            </li>
        </ul>
</div>

</template>

<script>
export default {
    name:'tree',
    props:{
        model:{}
    }
}

</script>

渲染：

• 外层2-1

• 外层2-2

• 外层2-3

  • 外层3-1

    • hello

    • wat

  • 外层3-2

  • 外层3-3

  • 外层3-4

    • hello

    • wat