vue外卖四：抽取公共组件TopHeader——slot的使用、父传子值
一、抽取公共组件TopHeader.vue
1.从Msite.vue抽取头部标题到src/components/TopHeader/TopHeader.vue
知识点1. 子组件接收父组件传值
- 模板内留下接收位置：
<!--1.接收父组件传值，名为title-->
<span class="header_title_text ellipsis">{{title}}</span>
- script设置接收值的类型，注意首字母大写
//2.接收父组件传的值为title,类型为String
props:{
title:String
}
知识点2.留下插槽位置
<!--3.插槽1，name:left-->
<slot name="left"></slot>
<!--4.插槽2，name:right-->
<slot name="right"></slot>
TopHeader.vue完整代码
<!--首页头部-->
<template>
<header class="header">
<!--3.插槽1，name:left-->
<slot name="left"></slot>
<span class="header_title">
<!--1.接收父组件传值，名为title-->
<span class="header_title_text ellipsis">{{title}}</span>
</span>
<!--4.插槽2，name:right-->
<slot name="right"></slot>
</header>
</template>
<script>
export default {
//2.接收父组件传的值为title,类型为String
props:{
title:String
}
}
</script>
<style lang="stylus">
.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>
二.使用公共组件：父传子值，使用插槽
1.msite.vue使用插槽，向子传值
1）引入子组件，并挂载
<script>
import TopHeader from '../../components/TopHeader/TopHeader.vue'
export default{
components:{
TopHeader,
}
}
</script>
2）使用子组件，并传值，使用插槽
1.把原header删除，改为如下，重点：0-2
<!--首页头部-->
<!--0.用title向子组件传值-->
<TopHeader title='首页-昌平区北七家宏福科技园(337省道北)'>
<!--1.使用插槽：左-->
<span class="header_search" slot='left'>
<i class="iconfont icon-sousuo"></i>
</span>
<!--2.使用插槽：右-->
<span class="header_login" slot='right'>
<span class="header_login_text">登录|注册</span>
</span>
</TopHeader>
2.search.vue使用topHeader
<template>
<section class="search">
<!-- 头部标题组件 -->
<TopHeader title="搜索"/>
略过...
</template>
<script>
import TopHeader from '../../components/TopHeader/TopHeader.vue'
export default{
components:{
TopHeader,
}
}
</script>
注意：style内header相关样式别忘记删除
