使用vuejs

Question

在app.js中我有：

import MenuItem from './components/MenuItem.vue'
import NavMenu from './components/NavMenu.vue'

new Vue({
    el: '#app',
    components: {
      'nav-menu' : NavMenu,
      'menu-item': MenuItem
    }
});

在NavMenu.vue中：

<template>
    <nav>
        <ul></ul>
    </nav>
</template>

<script>
    export default {}
</script>

在MenuItem.vue中：

<template>
    <li><a href="#">Link</a></li>
</template>
<script>
    export default {}
</script>

在索引中：

<div id="#app">
    <nav-menu>
        <menu-item></menu-item>
    </nav-menu>
</div>

我只看到<nav-menu>，当我添加<menu-item>作为兄弟时，它会被显示，否则就不会显示。如何在<nav-menu>或<nav-menu>里面<nav-menu>内尽可能多地使用它？

Answer 1

看起来你想要一个slot。

在NavMenu模板中......

<template>
    <nav>
        <ul>
            <slot>
              <li>Default content if nothing set</li>
            </slot>
        </ul>
    </nav>
</template>