代码之家 › 专栏 › 技术社区 › Matt Fellows

Vue.js引用的模板组件在第一个子组件之后停止

vue.js javascript

2

Matt Fellows · 技术社区 · 7 年前

我正在尝试使用Vue创建组件,这样就可以删除我正在处理的站点中大量重复的HTML。

<ym-menucontent> 组件,其中最终将有几个其他组件,有条件地呈现。

当我这么做的时候,我碰到了一堵墙,所以我简化了所有的事情来找到问题的根源。

渲染时 ym-menucontent 组件第一个子组件是唯一一个得到渲染,我不知道为什么或如何绕过它。。。

<template id="menucontent">
    <div>
        <ym-categories :menuitem="menuitem"/>
        <ym-rootmaps :menuitem="menuitem"/>
        <p>1: {{menuitem.rootMapsTab}}</p>
        <p>2: {{menuitem.exploreTab}}</p>
    </div>
</template>

<template id="rootmaps">
    <div>Root Maps</div>
</template>

<template id="categories">
    <div>Categories</div>
</template>

应用程序.js

Vue.component('ym-menucontent', {
    template: '#menucontent',
    props: ['menuitem'],
    data: function() {
        return {
            customMenu: window.customMenuJSON
        }
    }
});
Vue.component('ym-rootmaps', {
    template: '#rootmaps',
    props: ['menuitem'],
    data: function() {
        return {
            customMenu: window.customMenuJSON,
            rootMaps: window.rootAreas
        }
    }
});
Vue.component('ym-categories', {
    template: '#categories',
    props: ['menuitem'],
    data: function() {
        return {
            customMenu: window.customMenuJSON,
            rootMaps: window.rootAreas
        }
    }
});

用法。。。

<div 
    v-for="mi in customMenu.topLevelMenuItems"
    :id="mi.name" 
    class="page-content tab swiper-slide">
         <ym-menucontent :menuitem="mi"/>
</div>

输出

<div>Categories</div>

如果我换个位置 ym-cateogries 和 ym-rootmaps 然后输出变成。。。

<div>Root Maps</div>

如果我把这两个都去掉,我就会看到。。。

<p>1: true</p>
<p>2:</p>

<div>Categories</div>
<div>Root Maps</div>
<p>1: true</p>
<p>2:</p>

1 回复 | 直到 7 年前

1

3

Husam Ibrahim 7 年前

这可能是因为您在DOM模板中使用了自关闭组件,在 style-guide

只有 official âvoidâ elements 当Vues模板编译器可以在

这应该对你有用。。

<template id="menucontent">
    <div>
        <ym-categories :menuitem="menuitem"></ym-categories>
        <ym-rootmaps :menuitem="menuitem"></ym-rootmaps>
        <p>1: {{menuitem.rootMapsTab}}</p>
        <p>2: {{menuitem.exploreTab}}</p>
    </div>
</template>

<div 
    v-for="mi in customMenu.topLevelMenuItems"
    :id="mi.name" 
    class="page-content tab swiper-slide">
         <ym-menucontent :menuitem="mi"></ym-menucontent>
</div>