1.src/components/header.vue
<style lang="scss" scoped>
.header{
position: relative;
line-height: 38px;
color: #fff;
text-align: center;
background: #222;
.item{
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
a{
color:#fff;
}
}
.left{
left: 10px;
}
.right{
right: 10px;
}
}
</style>
<template>
<header class="header">
<div class="item left">
<slot name="left"></slot>
</div>
<div class="title">{{title}}</div>
<div class="item right">
<slot name="right"></slot>
</div>
</header>
</template>
<script>
export default {
props:{
title:{
type:String,
default:''
}
}
}
</script>
2.src/components/index.js
import header from './header'
export default { header }
3.main.js【加载公共组件】
import components from './components/' //加载公共组件
Object.keys(components).forEach((key) => {
var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写
Vue.component(`v${name}`, components[key])
})
4.使用
<template>
<v-header title="首页">
<router-link slot="left" to="/">首页</router-link>
<router-link slot="right" to="/signout">退出</router-link>
</v-header>
</template>