//子组件
<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. Django-09-cookie和session

    1. 简介 <1> cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie的工作原 ...

  2. KEPServerEX 6 配置连接 Allen-Bradley MicroLogix 1400

    =============================================== 2019/7/28_第1次修改                       ccb_warlock == ...

  3. Scala 系列(一)—— Scala 简介及开发环境配置

    一.Scala简介 1.1 概念 Scala 全称为 Scalable Language,即"可伸缩的语言",之所以这样命名,是因为它的设计目标是希望伴随着用户的需求一起成长.Sc ...

  4. AutoCAD ObjectARX 二次开发(2020版)--3,执行ARX文件--

    上一节中我们在initApp()函数中,将helloWorld()函数注册给了CAD主程序,注册指令的字符串为“Hello”. void initApp() { acedRegCmds->add ...

  5. springcolud 的学习(四)服务治理. Eureka

    什么是服务治理在传统rpc远程调用中,服务与服务依赖关系,管理比较复杂,所以需要使用服务治理,管理服务与服务之间依赖关系,可以实现服务调用.负载均衡.容错等,实现服务发现与注册.服务注册与发现 在服务 ...

  6. 使用JDK的zip编写打包工具类

    JDK自带的zip AIP在java.util.zip包下面,主要有以下几个类: java.util.zip.ZipEntryjava.util.zip.ZipInputStreamjava.util ...

  7. 2019 网宿科技java面试笔试题 (含面试题解析)

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.网宿科技等公司offer,岗位是Java后端开发,最终选择去了网宿科技. 面试了很多家公司,感觉大部分公司考察的点 ...

  8. Laravel 5.5 发布,ThinkSNS+ 升级及状况分享

    升级场景 ThinkSNS+ 一直依赖,都是保留 Laravel 的 commit 记录的前提下,进行开发,为了追随 Laravel 的升级,我们在本地的仓库中新建了一个分支,如果 laravel 更 ...

  9. testNG helloWorld

    1. 新建maven工程.File -> New -> Project -> Maven,不选Create from archetype,直接点击“Next”.GroupId和Art ...

  10. kindedtor 数据传输问题

    <script src="/static/kindeditor/kindeditor-all.js"></script><script src=&qu ...