javascript - 在子组件中挂载父组件

Question

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

在第一个实例中，Recursive 是父级。在 Recursive 中安装 Recursive 效果很好，在 Recursive 中安装 Value 以及之后的 Value 也是如此值中的code>。

但是当我在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>

值(value)

<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

我之前也遇到过类似的问题。唯一的出路是将组件声明为“全局”，因为将其导入实际需要它的组件中从未起作用。

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>