vueコンポーネントの再帰呼び出し

実際の作業では、一部の通常の DOM 構造では、同じコードを何度も繰り返し記述すると、それは明らかにプログラマとしてのアイデンティティに適合しません。。。

では、この問題を解決する方法はあるのでしょうか?

それが「再帰」、つまりコンポーネント内で自分自身を呼び出すことです。

コンポーネントは、次の条件を満たすように自身を呼び出すことができます。

コンポーネントには name 属性があります
メモリオーバーフローを防ぐために、再帰呼び出しに終了条件があることを確認します。

ツリー構造を実装する方法を以下に示します。el-tree など、呼び出すことができる既製のコンポーネントを備えたフロントエンドフレームワークは数多くありますが、コンポーネントの使用方法だけを知っていれば、それは簡単ではありません。プログラマーとしての私たちのアイデンティティと少し矛盾していますか? 。。遠く離れて、ツリー上で特別なデータ処理を実行する必要がある場合でも、少し原理を理解する必要があります。

親コンポーネント

<template>
  <div>
    <treeMenu :tree-list="treeData"></treeMenu>
  </div>
</template>
<script>
  import treeMenu from './childIndex'
  export default {
    components: {
      treeMenu
    },
    data () {
      return {
        index: 0,
        treeData: [
          {
            code: '1',
            title: '菜单1',
            open: false,
            children: [
              {
                code: '10',
                title: '菜单1-1',
                open: false,
                children: [
                  {
                    code: '100',
                    title: '菜单1-1-1',
                    open: false,
                    children: []
                  },
                  {
                    code: '200',
                    title: '菜单1-1-2',
                    open: false,
                    children: []
                  }
                ]
              },
              {
                code: '20',
                title: '菜单1-2',
                open: false,
                children: [
                  {
                    code: '200',
                    title: '菜单1-2-1',
                    open: false,
                    children: []
                  }
                ]
              }
            ]
          },
          {
            code: '3',
            title: '菜单3',
            open: false,
            children: [
              {
                code: '30',
                title: '菜单3-1',
                open: false,
                children: [
                  {
                    code: '300',
                    title: '菜单3-1-1',
                    open: false,
                    children: []
                  },
                  {
                    code: '301',
                    title: '菜单3-1-2',
                    open: false,
                    children: []
                  }
                ]
              },
              {
                code: '31',
                title: '菜单3-2',
                open: false,
                children: [
                  {
                    code: '310',
                    title: '菜单3-2-1',
                    open: false,
                    children: []
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    methods: {
    }
  }
</script>

サブアセンブリ

<template>
  <ul>
    <li v-for="(item, index) in treeList" :key="index">
      <div @click="openChild(item)">
        <span>[{
   
   {(item.open)?'-':'+'}}]</span>
        {
   
   {item.title}}
      </div>
      <div v-show="item.open">
        <treeMenu :tree-list="item.children" v-if="item.children.length > 0"></treeMenu>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    name: 'treeMenu', // 必要属性
    props: {
      treeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
      }
    },
    computed: {

    },
    methods: {
      // 控制展开与否
      openChild(item) {
        item.open = !item.open
      }
    }
  }
</script>

効果を達成する

単純なコンポーネントが再帰的にデモを呼び出し、再帰的なコンポーネントの理解に役立つことを期待しています。

vueコンポーネントの再帰呼び出し

おすすめ