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(3) 利用slot分发内容的更多相关文章

  1. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  2. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  3. Vue 组件&组件之间的通信 之 使用slot分发内容

    slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...

  4. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  5. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  6. Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

  7. vue组件4 利用slot将内容传递给组件

    除了将数据作为prop传入到组件中,vue也允许传入HTML 父组件中的子组件:<custom-button>点我<custom-button/> custom-button子 ...

  8. 使用slot分发内容

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...

  9. vue2.X slot 分发内容

    1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...

随机推荐

  1. 前端学习(三)css选择器(笔记)

    字体样式:    color:red:    font-size:12px:    font-weight:bold/normal;    font-style:italic/normal;    f ...

  2. 【sql】牛客网练习题 (共 61 题)

    [1]查找最晚入职员工的所有信息 CREATE TABLE `employees` ( `emp_no` ) NOT NULL, `birth_date` date NOT NULL, `first_ ...

  3. windows更改文件打开方式

  4. Python排序功能进阶

    sorted和sort() li = [9, 1, 8, 2, 7, 3, 6, 4, 5] s_li = sorted(li) print ('Sorted Variable: \t', s_li) ...

  5. bootstrapTable 分页插件

    前端: @{ ViewBag.Title = "BootstrapTable 入门"; Layout = null; } <!-- 引入bootstrap样式 --> ...

  6. 攻防世界 MISC篇

    Excaliflag 一张图片,winhex打开没什么发现,分值不高,应该属于常见的图片隐写题目.如果对于图片的格式有详细的了解,应该很容易就能够知道了属于最低有效位(LSB)隐写,下面是通过phot ...

  7. 设置select下拉框高度的一种方法

    这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: <select style="position: absolute;z-index: 1;" onmou ...

  8. Wannafly Winter Camp Day5 Div1 E题 Fast Kronecker Transform 转化为NTT或FFT

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog @ Problem:传送门  原题目描述在最下面.  对给定的式子算解.   ...

  9. 2017年上半年,一线城市豪宅TOP50成交均价排名

    辣眼睛!最新豪宅排行榜来了!释放重磅信号 东方财富网 2017-07-27 08:47 阅读:152 摘要:在中国,在买房这个问题上,不少工薪族都感到亚历山大.但是,在富豪眼里,犯难的是投资哪个房地产 ...

  10. 用 Flask 来写个轻博客 (2) — Hello World!

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 实现最简单的 Flask 应用 创建 config.py 文 ...