vue外卖四：抽取公共组件TopHeader——slot的使用、父传子值

本文链接：https://blog.csdn.net/u010132177/article/details/109544240

一、抽取公共组件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相关样式别忘记删除