vue的官网递归组件的解释https://cn.vuejs.org/v2/guide/components-edge-cases.html#递归组件 但是解释的例子不是很明确，下面我补充了一个例子，可以详细的理解递归组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <tree-folder></tree-folder> </div> <script> Vue.component('TreeFolderContents', { props: ['children'], template: ` <ul> <li v-for="child in children"> <tree-folder v-if="child.children" :folder="child"/> <span v-else>{{ child.name }}</span> </li> </ul> ` }) Vue.component('TreeFolder', { //name: 'tree-folder', props: ['folder'], template: ` <p> <span>{{ folder.name }}</span> <tree-folder-contents :children="folder.children"/> </p> `, }) let vm = new Vue({ el: '#root', data: { folder: { name: 'f1', children: { folder: { name: 'f2', children: { folder: { name: 'f3', children: { folder: { name: 'f4' } } } } } } } } }) </script> </body> </html>