vue 外卖app利用slot分发内容 _分发

缥帙各舒散，前后互相逾。这篇文章主要讲述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 映射成标签

exportdefault{ //映射成标签 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分发内容】