vue再帰コンポーネント

再帰コンポーネントの適用は、どのサブセットがあるか分からないため、レンダリングには自分のテンプレートを呼び出してレンダリングを継続し、最終的に必要なdomフォーマットを達成する必要があります.
再帰コンポーネントを2つのvueページで実証
1.データ転送ページMode

import myTrees  from './treeMenus'
export default {
  data(){
    return {
      list: [
        {
          name: '     111111111',
          cList: [
            { name: '     ' },
            {
              name: 'one chicken',
              cList: [
                { name: '     3333', cList: [{ name: '     ' }] }
              ]
            }
          ]
        },
        {
          name: '2222222222',
          cList: [
            { name: '     ' },
            {
              name: 'one chicken',
              cList: [
                { name: '     3333', cList: [{ name: '     ' }] }
              ]
            }
          ]
        },
        {
          name: '     33333333',
          cList: [
              { name: '     ' }, 
              { name: 'one chicken' }
            ]
        }
      ]
    }
  },
  components: {
    myTrees 
  }
}

2.再帰コンポーネントtreeMenus.vue

export default {
  name: 'treeMenus',
  props: {
    list: Array
  },
  data() {
    return {
      scopesDefault: [],
      scopes: []
    }
  },
  methods: {
    changeStatus(index) {
      if (this.scopesDefault[index] == true) {//      
        this.$set(this.scopesDefault, index, false)
      } else {
        this.$set(this.scopesDefault, index, this.scopes[index])
      }
    },
    scope() {//    
      this.list.forEach((item, index) => {//    
        this.scopesDefault[index] = false
        if ('cList' in item) {//      
          this.scopes[index] = true
        } else {//      
          this.scopes[index] = false
        }
      })
    }
  },
  created() {
    this.scope()//       
  }
}


 

転載先:https://www.cnblogs.com/yzyh/p/10430902.html