最近忙着写一些组件,关于插槽这一块自己还是用着 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 的
出口会带有隐含的名字“default”。
如下面一个组件,需要多个插槽。如何向组件提供内容呢?
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 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有它的默认的内容,有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。
总结
这里只是简单描述了几个关键点,其实还有很多可扩展的,或其他特性,我们还是需要多去看文档,多学习。