Vue组件递归 及 循环依赖 解决办法

组件递归（引入自己）

在写一个menu组件时，需要用到递归生成组件树的方法。

但是 “怎么在这个组件内部引入自己？？？？”

解决办法

添加name option，无需注册组件，直接在内部使用<MenuItem></MenuItem>

<script>
export default {
    name: "MenuItem"
}
</script>

循环依赖

我有一个Menu组件，一个MenuItem组件。

Menu组件内部接收一个名为list的props，通过它来循环渲染MenuItem

当我要生成一个二级菜单时，会使用list-item中的children来生成，比较简单的一个方法是 在MenuItem内再放一个Menu，将item中的children作为list props引入

如下：

Menu.vue

Menu.vue
<ul>
    <MenuItem
        v-for="item in list"
        :key="item.index"
        :info="item"
    />
</ul>

<script>
import MenuItem from "./MenuItem.vue"
export default {
    components: { MenuItem },
    props: {
        list: { type: Array }
    }
}
</script>

MenuItem.vue 

MenuItem.vue
<li>
    <span>{{info.title}}</span>
    <Menu
        v-if="item.children?.length"
        :list="item.children"
    />
</li>

<script>
import Menu from "./Menu.vue"
export default {
    components: { Menu },
    props: {
        info: { type: Object }
    }
}
</script>

此时会出现一个循环依赖的问题：Menu依赖MenuItem，而MenuItem依赖Menu。

若使用常规的组件引入方式时，会出现其中一方注册了但另一方未注册的情况发生，此时会报 "did you registed currectly?" 的错误。

解决办法

这时候我们可以考虑先注册好Menu组件，而MenuItem将以异步的方式引入组件内部。

1. beforeCreate

export default {
    beforeCreate () {
　　    this.$options.components.MenuItem = () => import('./MenuItem.vue')
    },
}

2.components

export default {
    components: { MenuItem: () => import("./MenuItem.vue") }
}