VueJS：コンポーネント内のサブコンポーネントにxテンプレートを使用する

Question

vuejsコンポーネント内のサブコンポーネントにxテンプレートを使用するための使用パターンを正しく理解していません。

私はテンプレートを持つCategoryNav.vueというコンポーネントを持っています。その中にリストを表示するために、xテンプレートを使用しました。しかし私は自分のページをレンダリングしますが、xテンプレートを使って作成されたこのコンポーネントは認識しません。私はそれを間違って使っていると思う。どんな助けもありがとうございます。ここに私の主要なコンポーネントのコードです。

CategoryNav.vue

<template> 
<div class=""> 
    <menu-list :items="treeList"></menu-list> 
</div> 
</template> 

<script type="text/x-template" id="menu-list-template"> 
    <ul v-if="items.length"> 
    <li v-for="item of items"> 
     <a :href="item.value">{{ item.label }}{{ item.id }}</a> 
     <menu-list :items="item.children"></menu-list> 
    </li> 
    </ul> 
</script> 
<script> 
const MenuList = { 
    name: 'menu-list', 
    template: '#menu-list-template', 
    props: ['items'] 
} 

export default { 
    name: 'category-nav', 
    components: { 
    MenuList 
    }, 
    computed: { 
    list() { 
     return this.$store.state.topics 
    }, 
    treeList() { 
     const items = this.list.map(item => Object.assign({}, item, { children: [] })) 
     const byValue = new Map(items.map(item => [item.value, item])) 
     const topLevel = [] 
     for (const item of items) { 
     const parent = byValue.get(item.parent) 
     if (parent) { 
      parent.children.push(item) 
     } else { 
      topLevel.push(item) 
     } 
     } 
     return topLevel 
    } 
    } 
} 
</script> 

Answer 1

これは動作しません。 <script type="text/x-template" id="menu-list-template">は、Vueが見つけるためのDOMのどこかに存在する必要があり、という部分は<template>セクションの外にあるため、custom blockとして扱われます（デフォルトでは無視されます）。

単一の* .vueファイルには、1つのコンポーネントのみが含まれています。とにかくxテンプレートをvue-loaderと混ぜることはお勧めしません。すべてのコンポーネントを* .vueファイルに入れて、コンパイルされたビルドを実行する必要があります。つまり、vueコンパイラを本番ビルドにバンドルする必要はありません。

次のいずれかを実行できます

1. は（推奨）、独自* .vueファイルにサブ成分を抽出し、CategoryNav.vueモジュールにインポートします。
2. サブコンポーネントはCategoryNav.vue<script>セクション内に完全に定義できますが、コンパイル済みのテンプレートは使用できません。そのためにレンダー機能を指定する必要があります（乱雑です）。
3. ＃2と同じですが、テンプレートを文字列として指定できますが、運用ビルドでVueコンパイラを出荷する必要があります。文字列ではなくxテンプレートを使用する場合は、xテンプレート<script>がDOMにあることを確認する必要があります。

Vueビルドファイルの説明については、thisを参照してください。

Answer 2

あなたは「メニューリスト」コンポーネント名を宣言していない、のは、これを試してみましょう：

export default { 
    name: 'category-nav', 
    components: { 
    'menu-list': MenuList 
    }, 
....