用vue2封装一个头部组件

好的，以下是一个简单的头部组件的 Vue 2 实现：

<template>
  <div class="header">
    <div class="logo">{{ title }}</div>
    <div class="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    title: {
      type: String,
      default: 'My App'
    }
  }
}
</script>

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

.logo {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
}

.nav {
  display: flex;
}

.nav a {
  margin-right: 20px;
  color: #fff;
  text-decoration: none;
}

.nav a:hover {
  color: #ccc;
}
</style>

这个组件包含一个标题和一个导航菜单。标题通过 `title` 属性传递，如果没有指定则缺省值为 "My App"。导航菜单使用 Vue Router 的 `router-link` 组件来实现。样式使用了 flex 布局和一些基本的 CSS 属性。

你可以在父组件中使用这个头部组件，如下所示：

<template>
  <div>
    <Header title="My App" />
    <router-view />
  </div>
</template>

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

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

这里使用了 Vue Router 的 `router-view` 组件来渲染路由对应的组件。注意要在 `components` 中注册 `Header` 组件。