create a component inside a component, getting error: "Failed to mount component: template or render function not defined."

Question

尝试制作一个组件（标签：simple-div-container），按下按钮将创建 2（标签：simple -div) 组件，在每个新的 simple-div 里面会有一个 simple-div -容器。

所以我可以在彼此内部创建 "endless" 个组件。

我有 simple-div-container 当我按下按钮时我得到 2 simple-div 但我没有把新的 simple-div-container.

放进去

我收到一个错误：

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-容器会显示

Answer 1

你有一个circular reference problem。您应该检查在 beforeCreate 生命周期挂钩中注册 simple-div 组件是否有帮助。在 simple-div-容器中：在 simple-div-容器中：

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

create a component inside a component, getting error: "Failed to mount component: template or render function not defined."

create a component inside a component, getting error: "Failed to mount component: template or render function not defined."

vue.js

vue-component

vuejs2