vue 外卖app(3) 利用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(3) 利用slot分发内容的更多相关文章
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
- Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
#单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...
- vue组件4 利用slot将内容传递给组件
除了将数据作为prop传入到组件中,vue也允许传入HTML 父组件中的子组件:<custom-button>点我<custom-button/> custom-button子 ...
- 使用slot分发内容
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板.这个过程被称为 内容分发 使用特殊的<slot>元素作为原始内容的插槽 除非子组件模板包含至少一个<slot&g ...
- vue2.X slot 分发内容
1.概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. 2.默认情况下 父组件在子组件内套的内容,是不显示的. ...
随机推荐
- Java面试宝典(5)算法
二.算法与编程 1.编写一个程序,将a.txt文件中的单词与b.txt文件中的单词交替合并到c.txt文件中,a.txt文件中的单词用回车符分隔,b.txt文件中用回车或空格进行分隔. 答: pack ...
- strxfrm - 转换字符串
总览 (SYNOPSIS) #include <string.h> size_t strxfrm(char *dest, const char *src, size_t n); 描述 (D ...
- ansible-继续普通用户权限运行
ansible 远程以普通用户执行命令 1. ansible 10.0.0.1 -m raw -a "date" -u www 2.在ansible的主机配置文件中指定ssh_ ...
- 基于Docker构建Jenkins CI平台
1.部署gitlab 1.1 部署gitlab docker run -d \ --name gitlab \ -p 8443:443 \ -p 9999:80 \ -p 9998:22 \ -v $ ...
- pc端与移动端适配解决方案之rem
使用方式: 在html页面开头,引入下面的原生js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'ori ...
- 【luoguP4768】【NOI2018】归程
description 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 nn 个节点.mm 条边的无向连通图(节点的编号从 11 至 nn).我们依次用 l,a ...
- js面向对象编程(第2版)——js继承多种方式
附带书籍地址: js面向对象编程(第2版)
- VC内联汇编,引用程序中的变量
int a=5; //变量a _asm { mov eax,a; //将变量a的值放入寄存器eax add eax,eax; //相当于a=a+a mov a,eax; // ...
- MProtect使用小计【三】 – 权限管理
说明 本篇简单的说一下怎么样使用的VMProtect的权限管理功能,使我们的程序拥有注册码的功能.只用的注册版的程序才能执行指定的函数. 同样这个功能VMProtect也有例子位置在:安装目录\VMP ...
- 制作linux根文件系统
转载地址:http://wenku.baidu.com/view/2cb1b4707fd5360cba1adb14.html 2011十一月 24 转 嵌入式根文件系统制作 (3985) (0) 转自 ...