将父组件装入子组

Question

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

首先Recursive是父母。在Recursive中安装Recursive变得很好，在安装Value之后在Recursive中也一样，之后Value在Value中。

但是当我后，我得到了以下错误Recursive安装Value，并试图安装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

我以前有过类似的问题。唯一的出路是将组件声明为“全局”，因为将它导入实际需要它的组件中从来没有用过。

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>