vue 外卖app 利用slot分发内容

Posted 1点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 外卖app 利用slot分发内容相关的知识,希望对你有一定的参考价值。

1. 增加一个HeaderTop.vue

<template>
  <header class="header">
    <slot name="left"></slot>
    <span class="header_title">
      <span class="header_title_text ellipsis">{{title}}</span>
    </span>
    <slot name="right"></slot>
  </header>
</template>

<script>

  export default {
    props: {
      title: String
    },
  }
</script>

<style lang="stylus" rel="stylesheet/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>

  2.Home.vue

引入 HeaderTop

import HeaderTop from ‘../../components/HeaderTop/HeaderTop.vue‘

  3.

3..Home.vue    映射成标签

export  default  {
  //映射成标签
   components:{
     HeaderTop
   }
}

 4..Home.vue使用,利用slot 分发左右两边的内容,通过绑定title 声明中间部分的文字

<HeaderTop title="昌平区北七家宏福科技园(337省道北)">
        <span class="header_search" slot="left">
          <i class="iconfont icon-sousuo"></i>
        </span>
        <span class="header_login" slot="right">
          <span class="header_login_text">登录|注册</span>
        </span>
      </HeaderTop>

  

以上是关于vue 外卖app 利用slot分发内容的主要内容,如果未能解决你的问题,请参考以下文章

Vue一个案例引发「内容分发slot」的最全总结

vue2.0 slot 分发内容

Vue中的slot内容分发

简单介绍关于vue 的slot分发内容 (多个分发)

Vue内容分发slot

Vue内容分发slot