vue 导航实现 slot

可以通过 Vue 的插槽（slot）实现导航栏的定制化。以下是一个简单的例子：

<template>
  <div class="nav">
    <div class="nav__logo">{{logo}}</div>
    <div class="nav__links">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  props: {
    logo: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.nav__logo {
  font-size: 24px;
  font-weight: bold;
}

.nav__links {
  display: flex;
  align-items: center;
}
</style>

在这个例子中，我们定义了一个 Navigation 组件，其中包含一个 logo 属性和一个插槽。我们可以在使用 Navigation 组件时，通过插入自定义的链接来实现自定义的导航栏。

<template>
  <Navigation :logo="logo">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </Navigation>
</template>

<script>
import Navigation from '@/components/Navigation.vue'

export default {
  components: {
    Navigation
  },
  data () {
    return {
      logo: 'My Website'
    }
  }
}
</script>

在使用 Navigation 组件时，我们可以在组件标签内部插入任意个数的链接，这些链接会被渲染到插槽中。在 Navigation 组件内部，我们可以通过 `<slot></slot>` 来定义插槽。这样，我们就可以很方便地实现导航栏的定制化。