//子组件
<template>
<van-nav-bar>
<slot slot="left" name="left"></slot>
<slot slot="title" name="title"></slot>
<slot slot="right" name="right"></slot>
</van-nav-bar>
</template> <script>
export default {
name: 'navbar'
}
</script> <style> </style>
//父组件
<template>
<NavBar>
<span slot="left" class="van-nav-bar__text">返回</span>
<div slot="title" class="van-nav-bar__title van-ellipsis">我是home标题</div>
<van-icon name="search" slot="right" />
</NavBar>
</template> <script>
import NavBar from '@/components/NavBar' export default {
name: 'index',
components: { NavBar }
}
</script> <style> </style>

vant - Navbar slot 插槽使用的更多相关文章

  1. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  2. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  3. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  4. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  5. vue中的slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...

  6. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  7. slot插槽(学习笔记)

    slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签 ...

  8. Vue(14)slot插槽的使用

    为什么使用slot slot(插槽) 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘,手机,鼠标,键 ...

  9. 在组件放使用v-model和slot插槽的简单实用

    封装的组件(SelectDefault.vue文件): <template> <div class="select-default"> <label& ...

随机推荐

  1. Go语言【开发】加载JSON配置文件

    JSON配置加载 辅助网址,JSON转结构体对应 http://json2struct.mervine.net/ 从JSON文件中加载配置到全局变量中 配置文件  config.json { &quo ...

  2. Vivado关联Modelsim进行联合仿真

    Vivado自带仿真工具,但是有点慢,关联Modelsim联合仿真是最好的,注意Modelsim必须是10.7以上版本. 1.安装并成功破解Modelsim 10.7. 2.打开Vivado,点击 T ...

  3. ubuntu 使用阿里云镜像源快速搭建kubernetes 1.15.2集群

    一.概述 搭建k8s集群时,需要访问google,下载相关镜像以及安装软件,非常麻烦. 正好阿里云提供了k8s的更新源,国内用户就可以直接使用了. 二.环境介绍 操作系统 主机名 IP地址 功能 配置 ...

  4. Bitnami配置域名访问

    安装完成Bitnami后,需要执行以下命令将默认目录改为/wordpress: E:\Bitnami\wordpress-5.2.2-0\apps\wordpress\bnconfig.exe --a ...

  5. CF704D Captain America 上下界网络流

    传送门 现在相当于说每一个条件都有一个染成红色的盾牌的数量限制\([l,r]\),需要满足所有限制且染成红色的盾牌数量最小/最大. 注意到一个盾牌染成红色对于一行和一列都会产生影响.如果选中一个物品对 ...

  6. 微信小程序与Django<一>

    小程序开发的准备工作 1.       小程序开发者账号 a)         邮箱注册 b)         开发者配置与AppID c)         https://mp.weixin.qq. ...

  7. mysql执行顺序与join连接

    mysql加载顺序 手写顺序 SELECT DISTINCT <select list> FROM <left_table> join <join_type> JO ...

  8. ASUS笔记本,更换了固态硬盘,重装系统前后开机都自动进入BIOS界面

    解决方法:advanced标签中sata configration回车进入,如有识别硬盘设备,按F9恢复BIOS默认设置,按F10保存后重启. 如有自行安装过系统,Security-Secure Bo ...

  9. Docker 基础篇 入门篇

    1.Docker入门 1.为什么要用docker? 相比于传统: 部署非常慢 成本非常高 资源浪费 难于迁移和扩展 可能会被限定硬件厂商 由于物理机的诸多问题,后来出现了虚拟机 一个物理机可以部署多个 ...

  10. maven设定项目编码

    今天在DOS下执行mvn compile命令时报错说缺少必要符号,事实上根本就没有缺少,但何以如此呢,为啥eclipse在编译时就没有这问题呢? 原因是编码的问题造成的! eclipse在编译的使用使 ...