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: `
            
  • {{ child.name }}
`
}) Vue.component('TreeFolder', { //name: 'tree-folder', props: ['folder'], template: `

{{ folder.name }}

`
, }) 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>

你可能感兴趣的:(myskill,vue,vue)