Question

How do you resolve circular dependencies between components?

Answer 1

In complex applications, vue components will actually be each other’s descendent and ancestor in the render tree.

Let's say componentA and componentB included in their respective templates which makes circular dependency,

//ComponentA

<div>

  <component-b >

</div>

//ComponentB

<div>

  <component-a >

</div>

This can be solved by either registering(or wait until) the child component in beforeCreate hook or using webpack's asynchronous import while registering the component,

Solution1:

beforeCreate: function () {

 this.$options.components.componentB = require('./component-b.vue').default

}

Solution2:

components: {

 componentB: () => import('./component-b.vue')

}