javascript - How to have indirectly self nested components in Vue JS 2? - Stack Overflow

admin管理员组

文章数量:1295257

I manage to create directly self nested ponents using the name property and all works perfectly.

<template>
    <div>
        <span>Hi, I'm ponent A!</span>
        <ponent-a></ponent-a>
    </div>
</template>

<script>
    export default {
        name: 'ponent-a',
        ponents: {
            'ponent-a': this
        }
    }
</script>

Now, I want to create indirectly self nested ponents. Something like this:

ComponentA.vue:

<template>
    <div>
        <span>Hi, I'm ponent A!</span>
        <ponent-b v-if="hasItems" v-for="item in items" :item="item"></ponent-b>
    </div>
</template>

<script>
    import ComponentB from './ComponentB.vue'

    export default {
        name: 'ponent-a',
        ponents: {
            'ponent-b': ComponentB
        },
        props: ['items'],
        puted: {
            hasItems() {
                return this.items.length > 0
            }
        }
    }
</script>

ComponentB.vue:

<template>
    <div>
        <span>Hi, I'm ponent B!</span>
        <ponent-a v-if="hasItems" :items="item.items"></ponent-a>
    </div>
</template>

<script>
    import ComponentA from './ComponentA.vue'

    export default {
        name: 'ponent-b',
        ponents: {
            'ponent-a': ComponentA
        },
        props: ['item'],
        puted: {
            hasItems() {
                return this.item.items.length > 0
            }
        }
    }
</script>

But that fails. I get the following error:

[Vue warn]: Failed to mount ponent: template or render function not defined. (found in ponent )

Has anyone came across something like this and was able to solve it? According to the documentation we have control recursive ponents with conditional rendering that what I am doing... I even tried to use the name prop on the ponents but it did nothing (nor I think it should since the ponents are not directly self-nested).

I manage to create directly self nested ponents using the name property and all works perfectly.

<template>
    <div>
        <span>Hi, I'm ponent A!</span>
        <ponent-a></ponent-a>
    </div>
</template>

<script>
    export default {
        name: 'ponent-a',
        ponents: {
            'ponent-a': this
        }
    }
</script>

Now, I want to create indirectly self nested ponents. Something like this:

ComponentA.vue:

<template>
    <div>
        <span>Hi, I'm ponent A!</span>
        <ponent-b v-if="hasItems" v-for="item in items" :item="item"></ponent-b>
    </div>
</template>

<script>
    import ComponentB from './ComponentB.vue'

    export default {
        name: 'ponent-a',
        ponents: {
            'ponent-b': ComponentB
        },
        props: ['items'],
        puted: {
            hasItems() {
                return this.items.length > 0
            }
        }
    }
</script>

ComponentB.vue:

<template>
    <div>
        <span>Hi, I'm ponent B!</span>
        <ponent-a v-if="hasItems" :items="item.items"></ponent-a>
    </div>
</template>

<script>
    import ComponentA from './ComponentA.vue'

    export default {
        name: 'ponent-b',
        ponents: {
            'ponent-a': ComponentA
        },
        props: ['item'],
        puted: {
            hasItems() {
                return this.item.items.length > 0
            }
        }
    }
</script>

But that fails. I get the following error:

[Vue warn]: Failed to mount ponent: template or render function not defined. (found in ponent )

Has anyone came across something like this and was able to solve it? According to the documentation we have control recursive ponents with conditional rendering that what I am doing... I even tried to use the name prop on the ponents but it did nothing (nor I think it should since the ponents are not directly self-nested).

• javascript
• vue.js
• vue-ponent

Share Follow edited Oct 22, 2016 at 17:29 Tomas Buteler 4,13744 gold badges3232 silver badges4343 bronze badges asked Oct 22, 2016 at 16:56 António QuadradoAntónio Quadrado 1,32522 gold badges1818 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I tried your code and I also ended up with the same error, without a clue on how to proceed. Later I closed my vue-cli and tried directly using vue.js from a CDN (standalone version), and it worked alright.

Here is the working example: https://jsfiddle/mani04/z09Luphg/

There is no magic going on here. Component A and Component B call each other with a counterValue. Once the counterValue reaches some limit, the recursion stops.

If you do not get a better answer, and if you are unable to modify your app architecture, you can try using this standalone vue.js method.

EDIT: more info below

On further research today, I came across this github discussion on webpack cyclical imports / circular dependencies: https://github./webpack/webpack/issues/1788

The standalone jsFiddle example above does not require any ES6 imports. In my sample code, Vue.js registers ponents globally before initiating the app. Therefore it works without any issues.

In summary, this does not look like an issue with Vue.js, but a webpack / es6 limitation based on current info. I may be wrong, please keep exploring further!

There is actually some good documentation and some different solutions for this issue, such as using asynchronous Webpack imports or registering self needed ponents globally.

<template>
    <div>
        <span>Hi, I'm ponent A!</span>
        <ponent-a></ponent-a>
    </div>
</template>

<script>
    export default {
      name: 'ponent-b',
      ponents: {
         // async import: 
         ComponentA: () => import('./ComponentA.vue')
      }
  }
</script>

本文标签： javascriptHow to have indirectly self nested components in Vue JS 2Stack Overflow