//子组件
<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. Python实现欧几里得算法

    欧几里得算法的目标是找到两个数的最大公约数. 计算两个非负整数p和q的最大公约数:若q是0,则最大公约数为p.否则,将p除以q得到余数r,p和q的最大公约数即为q和r的最大公约数. def eucli ...

  2. 【基本知识】UART接口

    1.简介 (1)UART一种通用异步串口数据总线,最低采用两路信号(TX/RX)即可实现全双工通信,十分简单: (2)UART采用LSB模式传输,串口数据传输格式如下图所示: 起始位:长度为1位的时间 ...

  3. football Alternative form of foteball

    football. Alternative form of foteball foteball(Late Middle English) football (game played with a ba ...

  4. 【题解】Luogu P5300 [GXOI/GZOI2019]与或和

    原题传送门 我们珂以拆位,拆成一个个0/1矩阵 贡献珂以用全0,全1的子矩阵的个数来计算 全0,全1的子矩阵的个数珂以用悬线法/单调栈解决 #include <bits/stdc++.h> ...

  5. vue报错[Vue warn]: Unknown custom element: <router-Link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...

  6. git设置代理模式,仅为github设置代理

    设置代理: 全局代理 git config --global http.proxy 127.0.0.1:1087 局部代理,在github clone 仓库内执行 git config --local ...

  7. 使用密码远程QQ时窗口闪退

    系统时间不一致,在QQ上使用密码远程时会闪退,把系统时间调到大概一致就行了.

  8. Redis笔记01——win10 64位系统安装Redis 3.2.100

    前言 由于项目中需要用到Redis,所以先在自己的win10上安装来体验一下. 安装步骤 一.下载地址 Redis下载地址 我选择的是3.2.100 的 64位 zip版本 二.安装位置以及文件简介 ...

  9. map小列

    // 有关学生信息的头文件student.h代码如下 #include #include using namespace std; struct Student                    ...

  10. centos7配置nfs共享存储服务

    nfs 是一种网络文件系统,需要依赖rpc进行过程调度 注意nfs只验证id,验证用户名,并且只能在类unix os上进行文件共享服务,由于它的脆弱的验证机制,所以不适宜在internet上工作,在内 ...