在 child 中安装 parent 组件

Question

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

首先Recursive就是parent。在 Recursive 中安装 Recursive 效果很好，在 Recursive 中安装 Value 以及在 Value.

中安装 Value 也是如此

但是当我在 Recursive 中挂载 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>

Answer 1

我之前遇到过类似的问题。唯一的出路是将组件声明为 "global"，因为将它导入到实际需要它的组件中从未奏效。

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>

在 child 中安装 parent 组件

Mount parent component in child

javascript

vue.js

mount