资讯专栏INFORMATION COLUMN

vue 插槽,`slot`和 `slot-scope`已被废弃

thursday / 1052人阅读

摘要:它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。例外情况当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。如下,让后备内容默认内容替换正常情况下的绑定在元素上的特性被称为插槽。

最近忙着写一些组件,关于插槽这一块自己还是用着 slot 和 slot-scope,然后看了一下文档的更新,于是又重新把“插槽”学习了一篇,下面一段是文档中的说明:

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slotslot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

插槽,也就是slot,slot就是子组件里的一个占位符,一个slot的核心问题,就是显不显示,显示的话显示话,该如何去展示出来,这是由父组件所控制的,但是插槽显示的位置是由子组件自己所决定的,slot写在组件template的什么位置,父组件传过来的模板将会显示在什么位置。

插槽的基本使用方法(匿名插槽)

这是一个子组件,我们使用了默认插槽(匿名插槽),父组件的内容将会代替显示出来


// 使用children组件
 代替slot的内容

渲染后的结果

具名插槽
自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。

有时我们一个组件里面需要多个插槽。我们怎么来区分多个slot,而且不同slot的显示位置也是有差异的.对于这样的情况, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:

注意:一个不带 name 的 出口会带有隐含的名字“default”。

如下面一个组件,需要多个插槽。如何向组件提供内容呢?

在向具名插槽提供内容的时候,我们可以在一个