在子

Question

我有两个名为Recursive.vue和Value.vue的文件。

在第一个实例中，Recursive是父级。在Recursive中装载Recursive非常棒，同样适用于Value中的Recursive以及Value中Value之后的装载。

但是当我在Value中安装Recursive并尝试在Recursive中安装Value后，我收到以下错误：

[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>

Answer 1

之前我遇到过类似的问题。唯一的出路是将组件声明为＆＃34; global＆＃34;，因为在实际需要它的组件中导入它从未工作过。

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>