子供の親コンポーネントをマウントする

Question

Recursive.vueとValue.vueの2つのファイルがあります。

最初のインスタンスでは、Recursiveが親です。 RecursiveをRecursiveにマウントすると、ValueをRecursiveに、それ以降は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

私は前に同様の問題がありました。唯一の方法はコンポーネントを「グローバル」として宣言することでした。コンポーネントを実際には必要としなかったコンポーネントにインポートすることができなかったからです。

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>