Vue.js 在组件内创建组件，获取错误：“0”；未能装入组件：未定义模板或呈现函数；

尝试制作一个组件（标记：简单div容器），按下按钮将创建2个（标记：简单div）组件，在每个新的简单div内部将有一个简单div容器

所以我可以在彼此内部创建“无限”的组件

我有简单div容器，当我按下按钮时，我得到2个简单div 但是我没有把新的简单div容器放在它们里面

我得到一个错误：

未能装入组件：未定义模板或渲染函数

标记代码：简单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>

插入2 div
从“../simple div/SimpleDiv.vue”导入SimpleDiv；
导出默认值{
道具：{
简单的重量：{
要求：对，
类型：编号
},
simpleDivWidthPrecent：{
要求：对，
类型：编号
}
},
数据（）{
返回{
divs:false，
}
},
方法：{
insert2Div（）{
console.log（'insert 2 div'）
this.divs=true；
},
},
组成部分：{
simplediv:simplediv
},
}
.水平对齐{
显示器：flex；
弯曲方向：行；
}

标签代码：simplediv

<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容器/simpleDivContainer.vue”导入simpleDivContainer；
导出默认值{
道具：{
高度：{
要求：对，
类型：编号
},
注意：{
要求：对，
类型：编号
},
以色列国防部：{
要求：对，
类型：布尔型
}
},
数据（）{
返回{
isDivContainer:false
}
},
组成部分：{
“简单div容器”：simpleDivContainer
}
}
.div控制器{
位置：固定；
转换：转换（-10%，-320%）；
}

有趣的一点是：如果我向简单的div数据添加一些属性（而webpack监听更改），那么它将自动重新加载，新的simpe div容器将显示您有一个。您应该检查在beforeCreate生命周期挂钩中注册简单div组件是否有帮助。在简单div容器中： 在简单div容器中：

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