Question

我正在尝试使用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>

app.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>

Answer 1

这可能是因为您在DOM模板中使用了自动关闭组件，建议在style-guide中使用它。.

不幸的是，HTML不允许自定义元素自动关闭- 仅official “void” elements。这就是为什么该策略只是当Vue的模板编译器可以在到达模板之前 DOM，然后提供符合DOM规范的HTML。

这应该对您有用..

<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>

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

1 个答案: