javascript - 在子代中安装父组件

我有两个名为Recursive.vue和Value.vue的文件。
首先Recursive是父对象。安装Recursive Recursive＞安装Value，之后Recursive > cc>。
但当我在Value中安装Value并尝试在Value中安装Recursive之后，我会得到以下错误：

[Vue warn]: Failed to mount component: template or render function not defined.
(found in component <recursive>)

我怎样才能把我的问题解决呢？
我的文件就是这样的：
递归的

<template>
  <div class="recursive">
    <h1 @click="toggle">{{comps}}</h1>
    <div v-if="isEven">
      Hello
      <value :comps="comps"></value>
    </div>
  </div>
</template>

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

export default {
  name: 'recursive',
  components: {
    Value
  },
  props: {
    comps: Number
  },
  computed: {
    isEven () {
      return this.comps % 2 == 0;
    }
  },
  methods: {
    toggle () {
      this.comps++;
    }
  }
}
</script>

价值

<template>
  <div class="value">
    <h1 @click="toggle">{{comps}}</h1>
    <div v-if="isEven">
      <recursive :comps="comps"></recursive>
    </div>
  </div>
</template>

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

export default {
  name: 'value',
  components: {
    Recursive
  },
  props: {
    comps: Number
  },
  computed: {
    isEven () {
      return this.comps % 2 == 0;
    }
  },
  methods: {
    toggle () {
      this.comps++;
    }
  }
}
</script>

贴片机

<template>
  <div class="mounter">
    <h1>HI</h1>
    <recursive :comps="comps"></recursive>
  </div>
</template>

<script>
import Recursive from './Recursive'

export default {
  name: 'mounter',
  components: {
    Recursive
  },
  data () {
    return {
      comps: 0
    }
  }
}
</script>

最佳答案

我以前也遇到过类似的问题。唯一的解决方法是将组件声明为“全局”，因为将它导入到实际需要它的组件中是行不通的。

new Vue({
...
})

Vue.component('recursive', require('./Recursive'))

然后您可以不导入而直接使用：

// Mounted
<template>
  <div class="mounter">
    <h1>HI</h1>
    <recursive :comps="comps"></recursive>
  </div>
</template>

<script>
export default {
  name: 'mounter',
  data () {
    return {
      comps: 0
    }
  }
}
</script>