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

这不会奏效。 {0}需要存在于某个地方的DOM中才能让Vue找到它，并且因为它位于<script type="text/x-template" id="menu-list-template">部分之外，<template>会将其视为custom block（默认情况下会被忽略。）

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

你可以：

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

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

Answer 2

您没有声明组件名称＆＃39; 菜单列表＆＃39;，让我们试试这个：

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

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

2 个答案: