vue組件遞歸的一些理解

自己做個小項目練手，需要用到組件遞歸，網上查了一些資料，每個代碼片段都認識，但是連起來，就一團漿糊。

既然人傻就多思考吧。不明白的點有以下：

1.組件怎么自己調用自己，函數的遞歸是就是在function fn(){ fn() },組件的遞歸沒有看到這樣子的呀。

答：組件中使用name屬性，給組件自己定義個名字，這樣在組件中就可以自己調用自己了。就像在函數中直接調用函數名來來遞歸。

2.組件的遞歸中一層又一層數據是如何獲取到的？

答：將嵌套的數據重新賦值給prop設置的屬性。

 <tree-menu v-for="(item,index) in model.children"  v-bind:model="item" v-bind:key="index"></tree-menu>

3.組件遞歸是怎么結束的？

判斷數據中是否存在屬性，以及該屬性的值不為空。見下面代碼中的haschild方法。

      hasChild(){
        return this.model.children && this.model.children.length
      }

 

下面的代碼來自https://www.jianshu.com/p/84eb67487113

准備數據文件——testdata.js

var demoData = [
  {
    'id': '1',
    'menuName': '基礎管理',
    'menuCode': '10',
    'children': [
      {
        'menuName': '用戶管理',
        'menuCode': '11'
      },
      {
        'menuName': '角色管理',
        'menuCode': '12',
        'children': [
          {
            'menuName': '管理員',
            'menuCode': '121'
          },
          {
            'menuName': 'CEO',
            'menuCode': '122'
          },
          {
            'menuName': 'CFO',
            'menuCode': '123'
          },
          {
            'menuName': 'COO',
            'menuCode': '124'
          },
          {
            'menuName': '普通人',
            'menuCode': '124'
          }
        ]
      },
      {
        'menuName': '權限管理',
        'menuCode': '13'
      }
    ]
  },
  {
    'id': '2',
    'menuName': '商品管理',
    'menuCode': ''
  },
  {
    'id': '3',
    'menuName': '訂單管理',
    'menuCode': '30',
    'children': [
      {
        'menuName': '訂單列表',
        'menuCode': '31'
      },
      {
        'menuName': '退貨列表',
        'menuCode': '32',
        'children': []
      }
    ]
  },
  {
    'id': '4',
    'menuName': '商家管理',
    'menuCode': '',
    'children': []
  }
];

export default  demoData;

 

父組件

<template>
  <div class="tree-menu">
    <ul v-for="menuItem in theModel">
//使用子組件，並將數據傳給子組件的model屬性上，供子組件使用。
      <my-tree :model="menuItem"></my-tree>
    </ul>
  </div>
</template>

<script>
  import testData from './testdata';
  import myTree from './treeMenu';

  export default {
//name屬性是組件的名字，這樣組件才能調用組件自己。
    name: "side-bar",
    components: {
//即treeMenu文件，它在side-bar組件中的名字設置為了myTree。
      myTree
    },
    data() {
      return {
//綁定數據供v-for循環使用。
        theModel: testData
      }
    }
  }
</script>

 

 

子組件treeMenu（樹形組件，遞歸）

<template>
  <li>
//控制圖標的顯示
    <span @click="toggle">
      <i v-if="hasChild" class="icon" v-bind:class="[open ? 'folder-open': 'folder' ]"></i>
      <i v-if="!hasChild" class="icon file-text"></i>
      {{model.menuName}}
    </span>
//判斷數據中是否有可遍歷的屬性。
    <ul v-show="open" v-if="hasChild">
//如果有可遍歷的屬性，調用組件自己（tree-menu），獲取下一層可以遍歷的數據，將下一層可遍歷屬性綁定到model作為model新的數據。
//key用來標識組件的唯一性，避免重復渲染。
      <tree-menu v-for="(item,index) in model.children"  v-bind:model="item" v-bind:key="index"></tree-menu>
    </ul>
  </li>
</template>

<script>
  export default {
//name屬性定義組件名，有了名字組件才可以調用自己。
    name: "treeMenu",
    props: ['model'],
    data(){
      return {
        open:false
      }
    },
    computed:{
      hasChild(){
//有children屬性且屬性值的長度不為零，那么就遞歸。
        return this.model.children && this.model.children.length
      }
    },
    methods:{
      toggle(){
        if(this.hasChild){
          this.open = !this.open
        }
      }
    }
  }
</script>