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. Java面试宝典(5)算法

    二.算法与编程 1.编写一个程序,将a.txt文件中的单词与b.txt文件中的单词交替合并到c.txt文件中,a.txt文件中的单词用回车符分隔,b.txt文件中用回车或空格进行分隔. 答: pack ...

  2. strxfrm - 转换字符串

    总览 (SYNOPSIS) #include <string.h> size_t strxfrm(char *dest, const char *src, size_t n); 描述 (D ...

  3. ansible-继续普通用户权限运行

    ansible 远程以普通用户执行命令   1. ansible 10.0.0.1 -m raw -a "date" -u www 2.在ansible的主机配置文件中指定ssh_ ...

  4. 基于Docker构建Jenkins CI平台

    1.部署gitlab 1.1 部署gitlab docker run -d \ --name gitlab \ -p 8443:443 \ -p 9999:80 \ -p 9998:22 \ -v $ ...

  5. pc端与移动端适配解决方案之rem

    使用方式: 在html页面开头,引入下面的原生js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori ...

  6. 【luoguP4768】【NOI2018】归程

    description 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 nn 个节点.mm 条边的无向连通图(节点的编号从 11 至 nn).我们依次用 l,a ...

  7. js面向对象编程(第2版)——js继承多种方式

    附带书籍地址: js面向对象编程(第2版)

  8. VC内联汇编,引用程序中的变量

    int a=5; //变量a _asm { mov eax,a;       //将变量a的值放入寄存器eax add eax,eax;   //相当于a=a+a mov a,eax;      // ...

  9. MProtect使用小计【三】 – 权限管理

    说明 本篇简单的说一下怎么样使用的VMProtect的权限管理功能,使我们的程序拥有注册码的功能.只用的注册版的程序才能执行指定的函数. 同样这个功能VMProtect也有例子位置在:安装目录\VMP ...

  10. 制作linux根文件系统

    转载地址:http://wenku.baidu.com/view/2cb1b4707fd5360cba1adb14.html 2011十一月 24 转 嵌入式根文件系统制作 (3985) (0) 转自 ...