vue插槽封装头部组件

好的，以下是一个使用 Vue 插槽封装头部组件的示例代码：

<template>
  <div class="header">
    <div class="logo">Logo</div>
    <slot name="menu"></slot>
  </div>
</template>

<script>
export default {
  name: 'Header',
}
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}
</style>

在上面的代码中，我们创建了一个名为 `Header` 的组件，并在模板中使用了插槽来动态插入菜单组件。具体来说，我们在 `slot` 标签中添加了一个 `name` 属性，用于标识插槽的名称，然后在父组件中使用 `<template v-slot:menu>` 或者 `<template #menu>` 来指定插槽的位置，并插入菜单组件。

下面是一个示例的父组件代码，其中包含了一个头部组件以及一个菜单组件：

<template>
  <div>
    <Header>
      <template #menu>
        <Menu />
      </template>
    </Header>
    <div class="content">Content</div>
  </div>
</template>

<script>
import Header from './Header.vue'
import Menu from './Menu.vue'

export default {
  name: 'App',
  components: {
    Header,
    Menu,
  },
}
</script>

<style>
.content {
  padding: 16px;
}
</style>

在上面的代码中，我们引入了 `Header` 和 `Menu` 组件，并在 `Header` 组件中使用了插槽来动态插入 `Menu` 组件。这样，我们就可以在不同的场景中灵活地使用头部组件，并根据需要插入不同的菜单组件。