一、说明
- 此组件会使用到 slot 进行组件间通信
- slot 通信是标签, 而不是单纯的数据
二、components/HeaderTop/HeaderTop.vue
<template>
<!--首页头部-->
<header class="header">
<slot name="search"></slot>
<span class="header_title">
<span class="header_title_text ellipsis">{{ title }}</span>
</span>
<slot name="login"></slot>
</header>
</template>
<script>
export default {
name: 'HeaderTop',
props: {
title: String
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"
.header
background-color #02a774
position fixed
z-index 100
left 0
top 0
width 100%
height 45px
.header_search
position absolute
left 15px
top 50%
transform translateY(-50%)
width 10%
height 50%
.icon-sousuo
font-size 25px
color #fff
.header_title
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
width 50%
color #fff
text-align center
.header_title_text
font-size 20px
color #fff
display block
.header_login
font-size 14px
color #fff
position absolute
right 15px
top 50%
transform translateY(-50%)
.header_login_text
color #fff
</style>
三、Msite.vue
<HeaderTop title="昌平区北七家宏福科技园(337 省道北)">
<router-link slot="search" to="/search" class="header_search">
<i class="iconfont icon-sousuo"></i>
</router-link>
<router-link slot="login" to="/login" class="header_login">
<span class="header_login_text">登录|注册</span>
</router-link>
</HeaderTop>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
name: 'Msite',
components: {
HeaderTop
}
}
</script>
四、Search.vue
<HeaderTop title="搜索"></HeaderTop>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
name: 'Search',
components: {
HeaderTop
}
}
</script>
五、Order.vue
<HeaderTop title="订单列表"></HeaderTop>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
name: 'Order',
components: {
HeaderTop
}
}
</script>
六、Profile.vue
<HeaderTop title="我的"></HeaderTop>
<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
export default {
name: 'Profile',
components: {
HeaderTop
}
}
</script>