vue中的slot(插槽)详解
最近忙着写一些组件,关于插槽这一块自己还是用着 slot 和 slot-scope,然后看了一下文档的更新,于是又重新把“插槽”学习了一篇,下面一段是文档中的说明:
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot
指令)。它取代了slot
和slot-scope
这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。
插槽,也就是slot,slot就是子组件里的一个占位符,一个slot的核心问题,就是显不显示,显示的话显示话,该如何去展示出来,这是由父组件所控制的,但是插槽显示的位置是由子组件自己所决定的,slot写在组件template的什么位置,父组件传过来的模板将会显示在什么位置。
插槽的基本使用方法(匿名插槽)
这是一个子组件,我们使用了默认插槽(匿名插槽),父组件的内容将会代替显示出来
<template><div><slot></slot></div>
</template>
<script>
export default {name: 'children'
}
</script>
// 使用children组件<children>代替slot的内容</children>
渲染后的结果
<template><div>代替slot的内容</div>
</template>
具名插槽
自 2.6.0 起有所更新。已废弃的使用
slot
特性的语法在这里。
有时我们一个组件里面需要多个插槽。我们怎么来区分多个slot,而且不同slot的显示位置也是有差异的.对于这样的情况, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
- 注意:一个不带 name 的 出口会带有隐含的名字“default”。
如下面一个组件,需要多个插槽。如何向组件提供内容呢?
<template><div><header><slot name="header"></slot><slot></slot></header><main><slot></slot></main></div>
</template>
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:
<!-- old -->
<children><template slot="header"><h1>Here might be a page title</h1></template><template slot="default"><p>A paragraph for the main content.</p><p>And another one.</p></template>
</children><!-- new -->
<children><template v-slot:header><!-- <template #header> 具名插槽可缩写形式 --><h1>Here might be a page title</h1></template><template v-slot:default><p>A paragraph for the main content.</p><p>And another one.</p></template>
</children>
渲染后的结果
<template><div><header><h1>Here might be a page title</h1></header><main><p>A paragraph for the main content.</p><p>And another one.</p></main></div>
</template>
注意:
v-slot
只能添加在一个<template>
上 (只有一种例外情况),这一点和已经废弃的slot
特性不同。例外情况: 当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上:
作用域插槽
自 2.6.0 起有所更新。已废弃的使用
slot-scope
特性的语法在这里。
有时候,插槽的内容中有需要访问到子组件里面的内容,类似子组件里的slot可以绑定一些当前作用域,从而传出来,使用组件时,插槽的内容就可以拿到slot传出来的数据,父级的插槽内容可用。
如下,让后备内容(slot默认内容)user.firstName 替换正常情况下的user.lastName
<span><slot>{{ user.lastName}}</slot>
</span>
绑定在 元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字:
// slot绑定了当前作用域下user对象
// 为什slot中还有内容呢?不是由插槽内容填充吗?在slot中有内容,我们可以称之为后备内容,
就是slot的默认内容,但我们使用这个插槽时,却没有内容填充,就会显示其默认的内容。
<span><slot v-bind:user="user">{{ user.lastName }}</slot>
</span>
在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字,slotProps可以任意命名的,通过slotProps.use就拿到了子组件slot传出来的对象。
<!-- old -->
<children><template slot="default" slot-scope="slotProps">{{ slotProps.user.firstName }}</template>
</children><!-- new -->
<children><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
</children>
在上述情况下,当被提供的内容只有默认插槽时,这样我们就可以把 v-slot 直接用在组件上:
<children v-slot:default="slotProps">{{ slotProps.user.firstName }}
</children>
// default可以省略,默认插槽的缩写语法
<children v-slot="slotProps">{{ slotProps.user.firstName }}
</children>
<!-- 解构插槽 prop -->
<children v-slot="{ user }">{{ user.firstName }}
</children>
<!-- user 重命名为 person-->
<children v-slot="{ user: person}">{{ person.firstName }}
</children>
- 注意:默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确,只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法
后备内容
什么是后备内容呢,一个slot有它的默认的内容,有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。
总结
这里只是简单描述了几个关键点,其实还有很多可扩展的,或其他特性,我们还是需要多去看文档,多学习。
vue中的slot(插槽)详解相关推荐
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- Vue 中的 ref 属性详解
Vue 中的 ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
- vue + element-ui 聊天_Vue 插槽详解
阅读本文约需要5分钟 大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了下前端几种高级布局的方式的相关知识,今天跟大家分享Vue ...
- vue中的slot插槽
1.无名插槽<body><div id="app">123</div><script src="https://cdn.jsde ...
- Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过 或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录 一.Render 的资料简介 ...
- Vue中process.env.NODE_ENV详解
一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习 vue.config.js 文件,发现一行,甚是费解. process.env.NODE_ENV 查阅资料后,发现 ...
- 【CSDN软件工程师能力认证学习精选】Vue 中的事件处理机制详解
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
- Vue中created和mounted详解
目录 一.生命周期概念 二.浏览器渲染过程 三.生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 四.使用场景 五.常见相关问题 ...
- Vue中keep-alive的使用详解
1.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁. 2.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 3.使用方 ...
- VUE中 ref $refs 使用详解,扩展到$parent 、$children 的使用
$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息,引用信息将会注册在父组件的$refs对象上,在js中使用$refs来指向DOM元素或组件实例: 应用一:在DOM元素上使用$ ...
最新文章
- delphi dbgrideh 遍历每一个单元格_利用财务函数制作贷款计算器,让你了解还款的每一个细节...
- 科研人专属微信红包封面免费送!速领
- [待总结]高频率vim命令
- 拥抱haXe之javascript 也玩mvc
- 【深度学习】最先进的图像分类算法:FixEfficientNet-L2
- 临近年关,发生两起磁盘占满引发的服务下线故障
- Python安装pip
- cubemx stm32 配置两个串口_STM32CubeMX系列教程5:串行通信(USART)
- sf | 空间矢量对象的“聚合”操作
- React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起
- 无需无线路由,将系统为win7的笔记本变成wifi的方法
- 一段平平无奇的秋招经历
- 要做好云计算所需要的成本,主要分为哪六大成本?
- Android 11 : 隐私和安全
- python学习-飞机大战
- 如何编写python函数_编写高质量的Python代码系列(二)之函数
- 怎么恢复计算机隐藏的桌面图标,怎么把桌面图标隐藏 win10桌面怎么找回我的文档图标?...
- 微信服务器接口配置程序
- 一语中的丨高对抗重实战攻防视角下,企业安全运营到底该怎么做?
- linux中用zip压缩文件,详解Linux中zip压缩和unzip解压缩命令及使用详解
热门文章
- 3dmark android 中文,貌似不靠谱,Android平台3DMark测试版初体验
- 中科三方域名管理专题:各种域名状态介绍
- 湖南省常德市谷歌高清卫星地图下载
- Python爬取起点小说并保存到本地文件夹和MongoDB数据库中
- U.K. Considers Giving RBS Bailout Leeway
- Linux永久修改主机名
- 数据库访问性能优化(转)
- Did you mean..?解法
- Cannot determine the organization name for this ‘dev.azure.com‘ remote url 解决方法
- Computer Organization and Architecture 10th - William Stallings