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

ゝ一世哀愁。 2022-09-06 10:24 212阅读 0赞

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

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

[https://www.jianshu.com/p/ced0ea9c265c][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" }],
                                },
                            ],
                        },
                    ],
                },

父组件：

子组件：

<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

[https_www.jianshu.com_p_ced0ea9c265c]: https://www.jianshu.com/p/ced0ea9c265c