使用vue插槽vm.$slots实现一个导航栏结构

下面是一个基本的导航栏结构，使用vue插槽vm.$slots来实现：

<template>
  <div class="navbar">
    <div class="navbar-title">
      <slot name="title"></slot>
    </div>
    <div class="navbar-menu">
      <ul>
        <li v-for="(link, index) in links" :key="index">
          <a :href="link.url">
            <slot :name="'link-' + index">{{ link.text }}</slot>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    links: {
      type: Array,
      required: true,
    },
  },
};
</script>

在这个组件中，我们使用了两个插槽：`title`和`link-x`（其中`x`是链接的索引）。`title`插槽用于显示导航栏的标题，而`link-x`插槽用于显示每个链接的文本。链接的URL是从`links`属性中获取的，这是一个数组，每个元素都包含一个`url`和一个`text`属性。

使用此组件，您可以在父组件中为每个插槽提供内容。例如：

<template>
  <div>
    <Navbar :links="links">
      <template #title>
        My Website
      </template>
      <template #link-0>
        Home
      </template>
      <template #link-1>
        About
      </template>
      <template #link-2>
        Contact
      </template>
    </Navbar>
  </div>
</template>

<script>
import Navbar from './Navbar.vue';

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      links: [
        { url: '/', text: 'Home' },
        { url: '/about', text: 'About' },
        { url: '/contact', text: 'Contact' },
      ],
    };
  },
};
</script>

在这个例子中，我们为`title`插槽提供了一个字符串，为每个`link-x`插槽提供了一个字符串。这些将在导航栏中显示。