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

<template>
<nav>
<ul>
<li>
<slot name="home">
<a href="/">Home</a>
</slot>
</li>
<li>
<slot name="about">
<a href="/about">About</a>
</slot>
</li>
<li>
<slot name="contact">
<a href="/contact">Contact</a>
</slot>
</li>
</ul>
</nav>
</template>

<script>
export default {
name: "Navigation",
};
</script>

相关问题

使用插槽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>

使用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`插槽提供了一个字符串。这些将在导航栏中显示。