Detailed explanation of using Vue custom tree control

tree: {
        title: '', // title (name) 
        key: '0',
        head: '', // avatar selectStatus: false, // checkBox selected status children: [
          {
            title: 'Wangwang Episode 1',
            key: '0-0',
            head: '',
            selectStatus: false,
            children: [
              {
                key: '0-0-0',
                title: 'Wangzai 1',
                head: require('@/assets/wan.jpg'),
                selectStatus: false
              }
            ]
          },
          {
            title: 'Wangwang Part 2',
            key: '0-1',
            head: '',
            selectStatus: false,
            children: [
              {
                title: 'Wangwang Second Division First Team',
                key: '0-1-0',
                head: '',
                selectStatus: false,
                children: [
                  {
                    title: 'Wangwang Second Division, Team 1, Class 1',
                    key: '0-1-0-2',
                    head: '',
                    selectStatus: false,
                    children: [
                      {
                        title: 'Wang Zai 3',
                        key: '0-1-0-2-0',
                        head: require('@/assets/wan.jpg'),
                        selectStatus: false
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
},

/*The core of the custom tree control is "the component calls itself". Here, the tree control is encapsulated into a subcomponent*/
<template>
  <div>
    <div class="tree-custom">
      <div :style="indent" @click="toggleChildren"> //The toggleChildren event is a control event for "expand content" and "close content"/* 
       Here is the specific content of the recursive data display. For example, the specific content of the recursion in this project is "Picture/Avatar", "Title/Name", "null/CheckBox" from the effect diagram.
       The effect diagram shows the logic:
       <div v-if="!headImg && label" >
       //If no avatar image has a title, display the "arrow-title" style</div>
        <div v-if="headImg">
       //If there is an avatar picture, display the "avatar-name-checkBox" style</div>
       */      
      </div>
      <tree-custom // "call itself"
        :key="children.key" // key value is unique v-for="children in treeData"  
        v-if="showChildren" // Determine whether to expand the content based on the toggleChildren event:treeData="children.children" // The following are some properties, you should be able to understand them! No more words!
        :label="children.title"
        :headImg="children.head"
        :pkid="children.key"
        :depth="depth+1" // This is used to control the indentation style of each line. You can move to the bottom => indent () to see the specific usage: selectStatus="children.selectStatus"
        v-bind="$attrs" // These two are used to implement communication between grandparent and grandchild components v-on="$listeners"
      >
      </tree-custom>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TreeCustom', // Give our component a name! Otherwise how to call data () {
    return {
      showChildren: true, // This is the data that controls whether to display the content~that is, expand and collapse!
      currentInfoData: {} // This is used to get the data of the current row. For the sake of simplicity, the specific use of the code above has been deleted by me ~ it is not very meaningful}
  },
  //The default value of the object should be returned by a factory function to avoid pitfalls props: {
    treeData: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: () => ''
    },
    depth:
      type: Number,
      default: () => 0
    },
    headImg: {
      type: String,
      default: () => ''
    },
    pkid:
      type: String,
      default: () => ''
    },
    selectStatus: {
      type: Boolean,
      default: () => null
    }
  },
  computed: {
    indent () { // Define different levels of indentation styles return { transform: `translate(${(this.depth - 1) * 15}px)` }
    }
  },
  methods: {
    toggleChildren () {
      this.showChildren = !this.showChildren
    },
    checkBoxSelectChange (e) {
      const checked = e.target.checked
      if (checked) {
       //Use the $listeners method to call the ancestor's function. Because this is a recursive component, the components may not have a strict parent-child relationship, so methods such as $emit and $parent are not appropriate this.$listeners.addSelectedData(this.currentInfoData)
      }
      if (!checked) {
        this.$listeners.deleteSelectedData(this.currentInfoData)
      }
    },
    getCurrentInfo (label, headImg, pkid) {
      this.currentInfoData = {
        key: pkid,
        title: label,
        head:headImg
      }
    }
  }
}
</script>

/*Component calling method*/
<div class="tree-scroll">
  <tree-custom
    :label="tree.title"
    :headImg="tree.head"
    :treeData="tree.children"
    :pkid="tree.key"
    :depth="0"
    :selectStatus="tree.selectStatus"
    @addSelectedData="addSelectedData"
    @deleteSelectedData="deleteSelectedData" />
</div>