Circular References Between Components Vue

Question

I have created two components (A and B). I am trying to make them recursive. So CompA calls ComB, CompB calls CompA and so on:

Page -> CompA -> CompB -> CompA -> CompB -> ...

This is my CompA.Vue

<CompB></CompB>

and its script:

import CompB from './CompB';
export default {
    name: "CompA",
    components:{CompB},
    props:['items']
 },
 beforeCreate() {
        this.$options.components.CompB = require("./CompB").default;
    },

and this is CompB.Vue:

<v-comp-a :items="test"></v-comp-a>

and its script:

 import CompA from '../components/CompA'
export default {
    name: "v-comp-b",
    components:{'v-comp-a':CompA},
    props: {
        label: {
            typ:String,
            required:true
        },
        properties:{
            type:Array,
            required:true
        }
    },

So, the main page loads with CompA and I can call CompB from there but the problem is that I cannot call CompA from CompB. I get this error: Unknown custom element:v-comp-a did you register the component correctly?

I have also imported both of the components in App.Vue:

import CompA from './components/CompA'
import CompB from './components/CompB'

and in script:

components: {
   CompA,
   CompB
}

and this is main page that passes data:

<v-comp-a :items="items"></v-comp-a>

I already saw this question. and read this documentation. I tried to show the import only since it would be very long, I also used CompA instead of v-comp-a. It did not help.

Please Help. I m starting to lose it :[

score 4 · Accepted Answer · answered Apr 20 '19 at 09:37

You have quite a lot of syntax errors: in CompA.vue:

beforeCreate() should be inside your export default
You are importing CompB in the beforeCreate hook, so remove the other import
Don't declare ComB in components
(There is still a comma after the last bracket but I guess that this is not the case in the actual project)

export default {
  name: "CompA",
  props:['items'],
  beforeCreate() {
    this.$options.components.CompB = require("./CompB.vue").default;
  }
}

Leave CompB.vue as it is and you should see the error disappear.

Now they are recursive but basically CompB is in CompA is in CompB ...
So making them recursive should give a recursive error.

Removing the import from CompA solved the issue. beforeCreate() was in the right place in the actual project. Thank you very much! — DjSh, Apr 20 '19 at 17:48

score 4 · Answer 2 · edited Sep 06 '22 at 19:16

4

With Vue 3, you can use Async Components:

export default {
  name: "CompA",
  components: {
    "CompB": defineAsyncComponent(() => import('./CompB.vue'))
  }
}

Documentation:

edited Sep 06 '22 at 19:16

tony19

125,647
18
229
307

answered Sep 27 '21 at 15:30

Motla

1,092
12
19

Circular References Between Components Vue

2 Answers2