用vue封装一个头部组件
时间: 2023-11-01 21:08:02 浏览: 112
在vue中封装可复用的组件方法
5星 · 资源好评率100%
好的,下面是一个简单的头部组件示例:
```vue
<template>
<div class="header">
<h1>{{ title }}</h1>
<nav>
<ul>
<li v-for="item in menu" :key="item.id">
<a :href="item.link">{{ item.name }}</a>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
props: {
title: String,
menu: Array
}
};
</script>
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #f1f1f1;
}
nav ul {
display: flex;
list-style: none;
}
nav li:not(:first-child) {
margin-left: 1rem;
}
nav a {
color: #333;
text-decoration: none;
}
</style>
```
这个头部组件包含一个标题和一个菜单,可以通过 props 传递数据。
使用方式:
```vue
<template>
<div>
<Header :title="pageTitle" :menu="menuItems" />
<!-- 其他内容 -->
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
components: {
Header
},
data() {
return {
pageTitle: "首页",
menuItems: [
{
id: 1,
name: "菜单1",
link: "/menu1"
},
{
id: 2,
name: "菜单2",
link: "/menu2"
},
{
id: 3,
name: "菜单3",
link: "/menu3"
}
]
};
}
};
</script>
```
阅读全文