vue递归组件的理解

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>

vue递归组件的理解

猜你喜欢