最近忙着写一些组件,槽还是用slots和slot-scope,然后看了看文档的更新,于是又研究了一下“slot”,下面一段是文档中的描述:在2.6.0中,我们引入了一种新的命名槽和作用域槽的统一语法(即v-slot指令)。它取代了slot和slot-scope,这两个目前已弃用但未删除的功能仍在文档中。新语法的起源可以在这个RFC中找到。插槽,即插槽,是子组件中的占位符。插槽的核心问题是是否显示它。如果显示,如何显示。这个是由父组件控制的,但是slot显示的位置是由子组件自己决定的,slot写在组件模板里,父组件传过来的模板就会显示在哪里。槽(匿名槽)的基本使用这是一个子组件,我们使用默认的槽(匿名槽),父组件的内容将被显示,而不是
//渲染后使用子组件替换slot的内容的结果替换了slot的内容
Namedslots从2.6.0开始更新。使用插槽功能的已弃用语法在此处。有时我们需要在一个组件中使用多个插槽。我们如何区分多个插槽,不同插槽的显示位置也不同。对于这种情况,元素有一个特殊的功能:名称。此功能可用于定义其他插槽:注意:没有名称的插座将具有隐式名称“default”。像下面这样的组件需要多个插槽。如何向组件提供内容?
当向命名插槽提供内容时,我们可以在元素上使用v-slot指令并将其名称作为v-slot参数提供:这里可能是一个页面标题
主要内容的一段。
还有一个one.
这里可能是一个页面标题
一段主要内容。
还有一段。
模板>渲染结果注意:v-slot只能加在一个上(只有一个例外),这个和已经deprecated的例外不同slotfeature:组件标签只能在仅提供默认插槽时用作插槽的模板。这样我们就可以直接在组件上使用v-slots:scopedslots自2.6.0以来已经更新。使用slot-scope功能的已弃用语法位于此处。有时,插槽的内容需要访问子组件中的内容。类似于子组件中的slot,可以绑定一些当前作用域,这样就可以传递出去了。使用组件时,可以将插槽的内容传递给插槽。在数据之外,父级的插槽内容可用。如下,让备份内容(slot默认内容)user.firstName替换普通的user.lastName{{user.lastName}}绑定到元素上属性称为插槽道具。现在在父作用域中,我们可以给v-slot带一个值来定义我们提供的插槽prop的名称://slotisboundtotheuserobjectinthecurrentscope//为什么插槽中还有内容??不是被slot内容填满了吗?槽中有内容,我们可以称之为备份内容,这是槽的默认内容,但是当我们使用这个槽时,没有内容可以填充,会显示默认内容。{{user.lastName}}在父作用域中,我们可以给v-slot一个值来定义我们提供的名字slotprop的slotProps可以任意命名,子组件slot传递过来的对象可以通过slotProps.use获取。{{slotProps.user.firstName}}{{slotProps.user.firstName}}在上面的例子中,当只提供默认插槽时,我们可以使用v-slot直接在组件上:{{slotProps.user.firstName}}//default可以省略,默认slot的缩写语法{{slotProps.user.firstName}}{{user.firstName}}{{person.firstName}}注意:默认槽的缩写语法不能与命名槽混合因为它会导致范围不明确。每当有多个插槽时,请始终对所有插槽使用基于的完整语法。回退内容是什么?插槽有它的默认内容,有时为插槽设置特定的回退(即默认)内容很有用,只有在没有提供内容时才会呈现。小结这里只是对几个关键点做简单的说明。其实还有很多可扩展的或者其他的功能。我们还需要多看文档,多学习。