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

在Vue.js中，`v-slot` 或者 `slot` 是一种强大的特性，用于复用模板的部分内容，比如在导航栏组件中。通过`vm.$slots`，你可以动态地插入到每个导航条项的内容。下面是一个简单的示例：

<template>
  <nav class="navbar">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <slot name="navbar-item" slot-scope="{ item }"> <!-- 指定插槽名 -->
          <a href="#">{{ item.text }}</a> <!-- 插入item的内容 -->
        </slot>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Home', link: '#' },
        { text: 'About', link: '#' },
        { text: 'Contact', link: '#' }
      ]
    };
  }
};
</script>

在这个例子中，`items` 数组包含了导航条项目的配置，而在`v-for`循环中，我们使用`slot`标签插入自定义的`navbar-item`内容。外部可以这样使用这个导航栏组件，并传递自定义的项：

<!-- 使用导航栏组件 -->
<my-navbar>
  <template #navbar-item="{ item }"> <!-- 定义插槽并绑定数据 -->
    <span>{{ item.text }} - {{ item.link }}</span>
  </template>
</my-navbar>