摘要:它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。例外情况当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。如下,让后备内容默认内容替换正常情况下的绑定在元素上的特性被称为插槽。
最近忙着写一些组件,关于插槽这一块自己还是用着 slot 和 slot-scope,然后看了一下文档的更新,于是又重新把“插槽”学习了一篇,下面一段是文档中的说明:
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。
插槽,也就是slot,slot就是子组件里的一个占位符,一个slot的核心问题,就是显不显示,显示的话显示话,该如何去展示出来,这是由父组件所控制的,但是插槽显示的位置是由子组件自己所决定的,slot写在组件template的什么位置,父组件传过来的模板将会显示在什么位置。
这是一个子组件,我们使用了默认插槽(匿名插槽),父组件的内容将会代替
// 使用children组件代替slot的内容
渲染后的结果
代替slot的内容
自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。
有时我们一个组件里面需要多个插槽。我们怎么来区分多个slot,而且不同slot的显示位置也是有差异的.对于这样的情况,
注意:一个不带 name 的
如下面一个组件,需要多个插槽。如何向组件提供内容呢?
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:
Here might be a page title
A paragraph for the main content.
And another one.
Here might be a page title
A paragraph for the main content.
And another one.
渲染后的结果
Here might be a page title
A paragraph for the main content.
And another one.
注意:v-slot 只能添加在一个 上 (只有一种例外情况),这一点和已经废弃的 slot特性不同。
例外情况: 当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上:
自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。
有时候,插槽的内容中有需要访问到子组件里面的内容,类似子组件里的slot可以绑定一些当前作用域,从而传出来,使用组件时,插槽的内容就可以拿到slot传出来的数据,父级的插槽内容可用。
如下,让后备内容(slot默认内容)user.firstName 替换正常情况下的user.lastName
{{ user.lastName}}
绑定在
// slot绑定了当前作用域下user对象
// 为什slot中还有内容呢?不是由插槽内容填充吗?在slot中有内容,我们可以称之为后备内容,
就是slot的默认内容,但我们使用这个插槽时,却没有内容填充,就会显示其默认的内容。
{{ user.lastName }}
在父级作用域中,我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字,slotProps可以任意命名的,通过slotProps.use就拿到了子组件slot传出来的对象。
{{ slotProps.user.firstName }} {{ slotProps.user.firstName }}
在上述情况下,当被提供的内容只有默认插槽时,这样我们就可以把 v-slot 直接用在组件上:
{{ slotProps.user.firstName }} // default可以省略,默认插槽的缩写语法{{ slotProps.user.firstName }} {{ user.firstName }} {{ person.firstName }}
注意:默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确,只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法
什么是后备内容呢,一个slot有它的默认的内容,有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。
这里只是简单描述了几个关键点,其实还有很多可扩展的,或其他特性,我们还是需要多去看文档,多学习。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105359.html
摘要:它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。例外情况当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。如下,让后备内容默认内容替换正常情况下的绑定在元素上的特性被称为插槽。 最近忙着写一些组件,关于插槽这一块自己还是用着 slot 和 slot-scope,然后看了一下文档的更新,于是又重新把插槽学习了一篇,下面一段是文档中的说明: 在 2.6.0 中...
摘要:在中,我们为具名插槽和作用域插槽引入了一个新的统一的语法即指令。它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅。 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。 引vue官方文档之前...
摘要:网络上大多数文章,也是千篇一律的翻译这句话,可是仅凭这一句话,我想象不到的使用场景。因为真正的使用场景下,子组件的数据都是来自父组件的。组件的数据都是来自调用者的,然后会把每一行的,在开发者需要时,传递出去。 Vue的slot-scope的场景的个人理解 这篇文章不是单纯把文档的话和api拿来翻译和演示,而是谈谈我对于slot-scope的使用场景的个人理解,如果理解错误,欢迎讨论! ...
摘要:具名插槽可以在一个组件中出现次。出现在不同的位置。这个稍微难理解一点。使用非常方便,是基于搭建工程。地址点这里最后如果本文对你理解和有帮助,请不要吝啬手中的点赞哟。 作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生算了吧,回头再...
阅读 2044·2021-09-22 15:43
阅读 8436·2021-09-22 15:07
阅读 1061·2021-09-03 10:28
阅读 2034·2021-08-19 10:57
阅读 1045·2020-01-08 12:18
阅读 2960·2019-08-29 15:09
阅读 1506·2019-08-29 14:05
阅读 1628·2019-08-29 13:57