создайте компонент внутри компонента, получив erorr: «Не удалось установить компонент: шаблон или функция рендеринга не определена».

Question

пытается сделать компонент (тег: простого Div-контейнер), что нажатие кнопки будет создать 2 (Тэг: простого ДИВ) компоненты, внутри каждого нового простодушия DIV будет простой-div-контейнер.

поэтому я могу создавать «бесконечные» компоненты внутри друг друга.

я есть простой-Div-контейнер и когда я нажимаю кнопку, я получаю 2 простой-DIV , но я не понимаю в них НОВУЮ простой Div-контейнер.

я получаю сообщение об ошибке:

Failed to mount component: template or render function not defined.

код для тега: простой Div-контейнер

<template> 
    <div> 
    <button @click="insert2Div" class="div-controler">insert 2 div</button> 
    <div v-if="divs" class="horizontal-align"> 
     <simplediv v-if="divs" :style="{height: simpleDivHeight + 'px',width: simpleDivWidthPrecent/2 + '%', border: 1 + 'px solid' }" 
     :height="simpleDivHeight" :widthPrecent="simpleDivWidthPrecent" :isRender="true"></simplediv> 
     <simplediv v-if="divs" :style="{height: simpleDivHeight + 'px',width: simpleDivWidthPrecent/2 + '%', border: 1 + 'px solid' }" 
     :height="simpleDivHeight" :widthPrecent="simpleDivWidthPrecent" :isRender="true"></simplediv> 
    </div> 
    </div> 
</template> 
<script> 
    import SimpleDiv from '../simple-div/simpleDiv.vue'; 
    export default { 
    props: { 
     simpleDivHeight: { 
     require: true, 
     type: Number 
     }, 
     simpleDivWidthPrecent: { 
     require: true, 
     type: Number 
     } 
    }, 
    data() { 
     return { 
     divs: false, 
     } 
    }, 
    methods: { 
     insert2Div() { 
     console.log('insert 2 div') 
     this.divs = true; 
     }, 
    }, 
    components: { 
     simplediv: SimpleDiv 
    }, 
    } 

</script> 
<style scoped> 
    .horizontal-align { 
    display: flex; 
    flex-direction: row; 
    } 

</style> 

код для тега: простой-DIV

<template> 
    <div> 
     <simple-div-container v-if="isRender" :simpleDivHeight="height" :simpleDivWidthPrecent="widthPrecent/2"></simple-div-container> 
    </div> 
</template> 
<script> 
    import simpleDivContainer from '../simple-div-container/simpleDivContainer.vue'; 
    export default { 
    props: { 
     height: { 
     require: true, 
     type: Number 
     }, 
     widthPrecent: { 
     require: true, 
     type: Number 
     }, 
     isRender:{ 
     require: true, 
     type: Boolean 
     } 
    }, 
    data() { 
     return { 
     isDivContainer: false 
     } 
    }, 
    components: { 
     'simple-div-container': simpleDivContainer 
    } 
    } 

</script> 
<style scoped> 
    .div-controler { 
    position: fixed; 
    transform: translate(-10%, -320%); 
    } 

</style> 

интересный момент: если я добавлю к данным simple-div какое-то свойство (в то время как webpack слушает изменения), чем он будет автоматически реендер и новый simpe-div-container покажет

спасибо всем, кто помогает.

Answer 1

У вас есть circular reference problem. Вы должны проверить, помогает ли регистрация компонента simple-div в методе hook. В простом-Div-контейнер: В простом-Div-контейнер:

beforeCreate() { 
    this.$options.components.simple-div = require('../simple-div/simpleDiv.vue') 
}