好家伙,

1.什么是插槽?

插槽是vue为组件的封装者提供的能力.允许开发者在封装组件时,

把不确定的,希望由用户指定的部分定义为插槽

 

我们依然可以把它理解为一个占位符

1.1.插槽的基本用法

试例项目目录如下:

在Left.vue组件中:

<template>
<div>
<!-- 声明一个插槽区域 -->
<slot></slot>
</div>
</template>

在App.vue组件中:

<template>
<div>
<Left>
<p>我是用来测试插槽的p标签
</p>
</Left>
</div>
</template> <script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue' export default {
data(){
return{
comName:'Left'
}
},
components:{
Left,
Right
//简写为 Left
}
}
</script>

1.2.为插槽添加名称属性:

<template>
<div>
<!-- 声明一个插槽区域 -->
<slot name="default"></slot>
</div>
</template>

在这里可以定义插槽的名称,

若不进行定义,则默认添加名称default

2.v-slot指令

作用:将该标签中的内容放到指定的标签中去渲染

首先说明,vue的官方文档说明了,这个指令只能被用于

<template></template>标签和组件中

 

使用格式:

在App.vue组件中:

<template>
<div>
<Left>
<!-- 1.如果要把内容填充到指定名称的插槽中,需要使用v-slot:这个指令 -->
<!-- 2.v-slot:后面要跟上插槽的名字 -->
<!-- 3.v-slot:指令不能直接用在元素身上,必须用在template标签上 -->
<!-- 4.template这个标签,他是一个虚拟的标签,只起到包裹性质的作用,但是不会被渲染为任何实质性的html元素 -->
<template v-slot:default>
<p>我是用来测试插槽的p标签</p>
</template> </Left>
</div>
</template>

2.1.缩写

v-slot的缩写为#

<template v-slot:default>
<p>我是用来测试插槽的p标签</p>
</template>
<template #default>
<p>我是用来测试插槽的p标签</p>
</template>

以上两者等效

3.插槽的后备内容,

封装组件时,可以为预留的<slot>插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供

任何内容,则后备内容会生效。(也就是备胎)

在Left.vue组件中:

<template>
<div>
<!-- 声明一个插槽区域 -->
<!-- vue官方规定:每个slot插槽,都要有一个name名称 -->
<!-- 如果省略了slot的name属性,则有一个默认名称叫做 default-->
<slot name="default">
<h1>我是后备内容</h1>
</slot>
</div>
</template>
												

第八十九篇:Vue 重学插槽slot的更多相关文章

  1. Python之路【第十九篇】:爬虫

    Python之路[第十九篇]:爬虫   网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...

  2. 第三百八十九节,Django+Xadmin打造上线标准的在线教育平台—列表筛选结合分页

    第三百八十九节,Django+Xadmin打造上线标准的在线教育平台—列表筛选结合分页 根据用户的筛选条件来结合分页 实现原理就是,当用户点击一个筛选条件时,通过get请求方式传参将筛选的id或者值, ...

  3. “全栈2019”Java第八十九章:接口中能定义内部类吗?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. Egret入门学习日记 --- 第十九篇(书中 8.8~8.10 节 内容)

    第十九篇(书中 8.8~8.10 节 内容) 开始 8.8节. 重点: 1.类型推断. 2.类型强制转换,使其拥有代码提示功能. 3.除了TS自带的类型判断,Egret官方也提供了类型判断的方法. 操 ...

  5. Android UI开发第三十九篇——Tab界面实现汇总及比较

    Tab布局是iOS的经典布局,Android应用中也有大量应用,前面也写过Android中TAb的实现,<Android UI开发第十八篇——ActivityGroup实现tab功能>.这 ...

  6. (八十九)c#Winform自定义控件-自定义滚动条(treeview、panel、datagridview、listbox、listview、textbox)

    官网 http://www.hzhcontrols.com/ 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kw ...

  7. 在vue中使用插槽 slot

    插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...

  8. Vue学习之路第十九篇:按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  9. 第八十五篇:Vue购物车(六) 总价的动态计算

    好家伙, 1.实现总价的动态计算 商品数量被动态的改变后, 相应的总价同样会改变 所以我们需要重新计算总价格了 这个的实现并不难 我只要拿到商品的数量就好了 我们用一个计算属性计算出已勾选商品的总数量 ...

随机推荐

  1. JavaScript 语言入门

    目录 JavaScript 介绍 JavaScript 和 和 html 代码的结合方式 第一种方式 第二种方式 4.变量 关系(比较)运算 逻辑运算 数组(重点) 函数(重点) 函数的二种定义方式 ...

  2. linux在线安装和配置JDK1.8

    首先在服务器ping www.baidu.com查看是否可以连网 然后就可以在线下载 一.下载安装JDK1.8 1.在下载安装的同时做一些准备工作 我们在usr目录下再创建一个Java文件夹准备放置我 ...

  3. NC21181 重返小学

    NC21181 重返小学 题目 题目描述 ​ 时光依旧,岁月匆匆.转眼间,曾经的少年郭嘉烜已经长大成人,考上了一所优秀的大学--兰州大学.在经历了一年来自牛顿.莱布尼茨.拉普拉斯的精神洗礼后,他终于决 ...

  4. 013(oulipo)

    题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1455 题目描述:在母串里找子串出现的次数 题目思路:与字符串的搜索有关那就立刻找到哈希 从s[1 ...

  5. 关于webapi调用wcf并发假死的分析

    原来IDFA(IOS推广获取到用户IOS手机的唯一标识,如果不刷机的话跟安卓的IMEI一样)在公司正常的页面是公用用一个网站和数据库的. 起初怀疑并发数太多,把数据库连接池的数量从一百设置到三百,确实 ...

  6. python+tkinter 的布局

    from tkinter import * win = Tk() win.title("布局") # #窗口标题 win.geometry("600x500+200+20 ...

  7. mysql面试题整理

    1 myisam 和 innodb 引擎的区别 innodb 支持事务,外键,myisam 不支持 innodb 支持 mvcc ,myisam 不支持 innodb 支持表锁.行锁,myisam 仅 ...

  8. 栈和排序_via牛客网

    题目 链接:https://ac.nowcoder.com/acm/contest/26886/A 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语 ...

  9. 第七天python3 函数、参数及参数解构(二)

    函数参数 参数规则: 参数列表参数一般顺序是:普通参数<--缺省参数<--可变位置参数<--keyword-only参数(可带缺省值)<--可变关键字参数 def fn(x,y ...

  10. angular里forwardRef的原理

    一段会报错的angular代码 @Injectable() class Socket { constructor(private buffer: Buffer) { } } console.log(B ...