I manage to create directly my own nested components using the property name, and everything works fine.
<template>
<div>
<span>Hi, I'm component A!</span>
<component-a></component-a>
</div>
</template>
<script>
export default {
name: 'component-a',
components: {
'component-a': this
}
}
</script>
Now I want to create indirectly independent nested components. Something like that:
ComponentA.vue:
<template>
<div>
<span>Hi, I'm component A!</span>
<component-b v-if="hasItems" v-for="item in items" :item="item"></component-b>
</div>
</template>
<script>
import ComponentB from './ComponentB.vue'
export default {
name: 'component-a',
components: {
'component-b': ComponentB
},
props: ['items'],
computed: {
hasItems() {
return this.items.length > 0
}
}
}
</script>
ComponentB.vue:
<template>
<div>
<span>Hi, I'm component B!</span>
<component-a v-if="hasItems" :items="item.items"></component-a>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
export default {
name: 'component-b',
components: {
'component-a': ComponentA
},
props: ['item'],
computed: {
hasItems() {
return this.item.items.length > 0
}
}
}
</script>
But it fails. I get the following error:
[Vue warn]: Failed to install component: template or rendering function not defined. (found in component)
- - ? , ... name prop , ( , , -nested).