//子组件
<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. stm32f103c8串口USART1发送多一字节

    用UART写了一段Bootloader代码,遇到了一个很奇怪的现象. 代码如下:简单介绍一下就是先统一配置MCU的IO端口,然后配置串口参数,然后循环发送‘0’和'\r’.16进制是0x30 0x0d ...

  2. Go语言【学习】defer和逃逸分析

    defer 什么是defer? defer是Go语言的一中用于注册延迟调用的机制,使得函数活语句可以再当前函数执行完毕后执行 为什么需要defer? Go语言提供的语法糖,减少资源泄漏的发生 如何使用 ...

  3. 【1】【leetcode-5】最长回文子串

    给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: "bab"注意: " ...

  4. x.append()增加不同维度的区别

    b=np.array([[7,2],[2,4],[3,6],[7,8],[9,10]])print(b)print(type(b)) # 结果显示为nunmpy 数组a=[]for i in rang ...

  5. SpringMVC+SpringBoot+MyBatis

    一.在框架中有时候会发现dao层和service层是相同的代码,为什么会同时存在呢?(以下https://blog.csdn.net/fanjieshanghai/article/details/88 ...

  6. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  7. MySQL Percona Toolkit--pt-osc执行SQL命令

    pt-osc执行日志 在对数据量为100000的表tb004做DROP COLUMN操作,pt-osc工具日志为: Operation, tries, wait: analyze_table, , c ...

  8. Linux命令——whiptail交互式shell脚本对话框

    转自:交互式shell脚本对话框----whiptail指令 当你在linux环境下setup软件的时候就会有相应的对话框让你输入.虽然我们已经习惯了这种交互的方法,但是如果有一种直观的界面来输入是不 ...

  9. 《大象 Thinking in UML》读书笔记:Process-oriented vs. Object-oriented

    前言 面向过程 还是 面向对象?这不仅仅是个软件工程术语,其问题甚至可以追溯到亚里士多德:您把这个世界视为过程还是对象? 回归到现今的软件行业,这不仅仅是个某个具体编程技术问题,更是认识论问题. 认识 ...

  10. session和cookie的区别和联系详解,Cookie Session相关看这篇就够了。

    本文转自:91博客:原文地址:http://www.9191boke.com/199015867.html 有一朋友做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么 ...