我没有正确理解将 x-template 用于 vuejs 组件内的子组件的使用模式。
所以，我有一个名为 CategoryNav.vue 的组件，它有一个模板。为了显示一个列表，我们使用了一个 x 模板。但是我渲染了我的页面，它无法识别使用 x-template 创建的这个组件。我认为我使用它不正确。任何帮助表示赞赏。这是我的主要组件代码。
分类Nav.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>
这行不通。<script type="text/x-template" id="menu-list-template">需要存在于 DOM 中的某个地方以便 Vue 找到它，并且由于它在该<template>部分之外，因此vue-loader会将其视为自定义块（默认情况下将被忽略）。
单个 *.vue 文件旨在仅包含一个组件。我不建议混合使用 x-templates vue-loader。您应该将每个组件都放入一个 *.vue 文件中，以便对其进行预编译，这样您就无需在生产版本中捆绑 vue 编译器。
您可以：
CategoryNav.vue模块中。CategoryNav.vue <script>节内定义子组件，但它不能有编译模板。您必须为其指定渲染功能（混乱）。<script>在 DOM 中。见这对Vue公司构建文件的解释。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句