vue组件递归，A-A 递归和A-B递归

在我们平常的开发中组件递归很常见，一般情况下递归有两种类型，一种是自递归如：A->A->A，另一种是相互递归如：A->B->A。对于A->A单个组件自递归的情况，vue推荐使用name来解决,用法非常简单。

// component A

但是对于A-B-A 两个组件相互递归调用的方式，name并不能很好的处理,如果在B組件直接使用A組件会显示组件未注册，而使用相互引入的方式，也会报未注册。

// component A

// component B

 

 

以上写法会报错，说组件A未定义，那么对于这种需求如何解决呢？

这里有两种解决方式

方法1.配合name 使用solt将组件传递过去

方法2.全局注册A组件

假设数据接口是这样个可以无限层次的JSON

 [
        {
          name: "item1",
          children: [
            {
              name: "item1-1",
            },
            {
              name: "item1-2",
              children: [
                {
                  name: "item1-1-1",
                },
              ],
            },
          ],
        },
        {
          name: "item2",
          children: [
            {
              name: "item2-1",
            },
            {
              name: "item2-2",
            },
          ],
        },
      ],

方法一：name + slot

将当前组件已slot的形式传递给子组件。

//A组件

// component B

 

方法二：全局组件

全局注册A组件后就不会再报A未注册了

//main.js
import Vue from 'vue'
import App from './App.vue'
import componentA from './componentA'
Vue.component('componentA',componentB)

new Vue({
  render: h => h(App),
}).$mount('#app')

接下来组件正常使用就可以了

//A组件

 

// component B