当前位置: 首页 > Web前端 > HTML5

vueslots,`slot`和`slot-scope`已经废弃了

时间:2023-04-06 00:06:50 HTML5

最近忙着写一些组件,槽还是用slots和slot-scope,然后看了看文档的更新,于是又研究了一下“slot”,下面一段是文档中的描述:在2.6.0中,我们引入了一种新的命名槽和作用域槽的统一语法(即v-slot指令)。它取代了slot和slot-scope,这两个目前已弃用但未删除的功能仍在文档中。新语法的起源可以在这个RFC中找到。插槽,即插槽,是子组件中的占位符。插槽的核心问题是是否显示它。如果显示,如何显示。这个是由父组件控制的,但是slot显示的位置是由子组件自己决定的,slot写在组件模板里,父组件传过来的模板就会显示在哪里。槽(匿名槽)的基本使用这是一个子组件,我们使用默认的槽(匿名槽),父组件的内容将被显示,而不是//渲染后使用子组件替换slot的内容Namedslots从2.6.0开始更新。使用插槽功能的已弃用语法在此处。有时我们需要在一个组件中使用多个插槽。我们如何区分多个插槽,不同插槽的显示位置也不同。对于这种情况,元素有一个特殊的功能:名称。此功能可用于定义其他插槽:注意:没有名称的插座将具有隐式名称“default”。像下面这样的组件需要多个插槽。如何向组件提供内容?当向命名插槽提供内容时,我们可以在

主要内容的一段。

还有一个one.

这里可能是一个页面标题

一段主要内容。

还有一段。

渲染结果注意:v-slot只能加在一个{{slotProps.user.firstName}}在上面的例子中,当只提供默认插槽时,我们可以使用v-slot直接在组件上:{{slotProps.user.firstName}}//default可以省略,默认slot的缩写语法{{slotProps.user.firstName}}{{user.firstName}}{{person.firstName}}注意:默认槽的缩写语法不能与命名槽混合因为它会导致范围不明确。每当有多个插槽时,请始终对所有插槽使用基于