好家伙,

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. node图片压缩的两员大将

    一.ishrink 全局安装 npm i ishrink -g 1.按url方式压缩 本地图片地址 sk -u C:\Users\admin\Desktop\images\img 网络图片地址 sk ...

  2. React技巧之打开文件输入框

    原文链接:https://bobbyhadz.com/blog/react-open-file-input-on-button-click 作者:Borislav Hadzhiev 正文从这开始~ 总 ...

  3. 从Hadder看蛋白质分子中的加氢算法

    技术背景 PDB(Protein Data Bank)是一种最常用于存储蛋白质结构的文件.而我们在研究蛋白质构象时,往往更多的是考虑其骨架,因此在很多pdb文件中直接去掉了氢原子.但是在我们构建蛋白质 ...

  4. js烧脑面试题大赏

    本文精选了20多道具有一定迷惑性的js题,主要考察的是类型判断.作用域.this指向.原型.事件循环等知识点,每道题都配有笔者详细傻瓜式的解析,偏向于初学者,大佬请随意. 第1题 let a = 1 ...

  5. Python教程:执行cmd命令

    我们通常可以使用os模块的命令进行执行cmd 方法一:os.system def system(*args, **kwargs): # real signature unknown "&qu ...

  6. P2575 高手过招 题解

    题目描述 我们考虑如何把问题转换成博弈论来求解. 我们对于每一行之前都加上一个空格. 设原来这一行的空格个数是 \(C\) ,那么此时空格个数变成 \(C + 1\) . 然后按照从左到右的顺序给每一 ...

  7. Tapdata 数据库实时同步的技术要点

    Tapdata 是由深圳钛铂数据有限公司研发的一款实时数据处理及服务的平台产品,企业可以使用 Tapdata 快速构建数据中台和实时数仓, Tapdata 提供了一站式的解决方案,包括实时数据采集.数 ...

  8. python解决“failed to execute pyi_rth_pkgres”问题

    pip uninstall pyinstaller pip install https://github.com/pyinstaller/pyinstaller/archive/develop.zip

  9. pinia 入门及使用

    自上月从上海结束工作回来 在家闲来无事 想写点东西打发时间 也顺便学习学习新的技术.偶然发现了 pinia 据说比vuex好用些 所以便搭了个demo尝试着用了下 感觉确实不错,于是便有了这篇随笔. ...

  10. React报错之map() is not a function

    正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用ma ...