Unnamed Slots

DEX475 - Composition

📄 第 86 页 🎬 视频课程

课程章节介绍

好,同学们,咱们今天来看一个特别基础但又非常重要的概念,叫做未命名插槽。 你可以把它想象成子组件给自己留的一个“内容入口”。很简单,就是子组件在它的模板里放一个 `` 标签,不需要给它起名字。这就好像在说:“将来会有人在这里放东西,但我现在还不知道是什么。” 那父组件怎么用呢?父组件只需要把自己想要的内容,直接写在子组件的开始和结束标签之间就行了。比如,父组件写 `

你好

`。渲染的时候,这个 `` 就会被替换成父组件传过来的 `

你好

`,最终页面就显示出“你好”这句话,而且还是在子组件原本模板结构的那个位置里。 不过这里有个很容易踩的坑,你一定要注意。如果一个子组件里不小心放了多个没名字的 ``,那会怎么样?结果是,父组件传进来的同一份内容,会同时填充到所有这些 `` 里。这基本上不是我们想要的效果,往往会导致页面上重复显示,逻辑混乱。 所以,最佳实践很明确:每个组件最多只保留一个未命名插槽。如果你发现自己需要把不同内容塞到组件里的不同位置,那就该用命名插槽了,我们后面会讲到。 好,这节课就到这里,记得动手试试看,有什么问题随时问我。

关键词

LWC Lightning Web Components Salesforce