Mount-Komponente in Kind

Question

Ich habe zwei Dateien mit den Namen Recursive.vue und Value.vue.

In der ersten Instanz Recursive ist das übergeordnete Element. Montage Recursive in Recursive geht gut, gleich für die Montage Value in Recursive und danach Value in Value.

Aber wenn ich habe Value in Recursive montiert und versucht Recursive in Value nach, dass ich die folgende Fehlermeldung zu montieren:

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

Wie kann ich mein Problem Arbeit machen?

Dies ist, was meine Dateien suchen wie:

rekursive

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

Wert

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

Mounter

<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

Ich hatte ein ähnliches Problem vor. Der einzige Ausweg bestand darin, die Komponente als "global" zu deklarieren, da das Importieren in die Komponente, die sie tatsächlich benötigte, nie funktionierte.

new Vue({ 
... 
}) 

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

Dann können Sie einfach ohne den Import verwenden:

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

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