VueJS：将x-template用于组件内的子组件

Question

我没有正确理解在vuejs组件中使用x-template用于子组件的使用模式。

所以，我有一个名为CategoryNav.vue的组件，它有一个模板。在显示列表的内部，我们使用了x模板。但是我渲染了我的页面，它无法识别使用x-template创建的这个组件。我想我使用不正确。任何帮助表示赞赏。这是我的主要组件代码。

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找到它，并且由于它在<template>部分之外，vue-loader将把它视为custom block（默认情况下将被忽略）。

单个* .vue文件仅包含一个组件。我不建议将x-templates与vue-loader混合使用。您应该将每个组件放入* .vue文件中以便进行预编译，这样您就不需要在生成版本中捆绑vue编译器。

你可以：

1. （推荐）将子组件解压缩到自己的* .vue文件中，并将其导入CategoryNav.vue模块。
2. 您可以在CategoryNav.vue <script>部分中完全定义子组件，但它不能具有已编译的模板。你必须为它指定渲染功能（凌乱）。
3. 与＃2相同，但您可以将模板指定为字符串，但是您需要在生成版本中发布Vue编译器。如果要使用x模板而不是字符串，则需要确保x模板<script>位于DOM中。

有关Vue构建文件的说明，请参阅this。

Answer 2

您没有声明组件名称'menu-list'，让我们试试这个：

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