好,同学们,咱们今天来看一个特别基础但又非常重要的概念,叫做未命名插槽。
你可以把它想象成子组件给自己留的一个“内容入口”。很简单,就是子组件在它的模板里放一个 `
` 标签,不需要给它起名字。这就好像在说:“将来会有人在这里放东西,但我现在还不知道是什么。”
那父组件怎么用呢?父组件只需要把自己想要的内容,直接写在子组件的开始和结束标签之间就行了。比如,父组件写 `
你好
`。渲染的时候,这个 `
` 就会被替换成父组件传过来的 `你好
`,最终页面就显示出“你好”这句话,而且还是在子组件原本模板结构的那个位置里。
不过这里有个很容易踩的坑,你一定要注意。如果一个子组件里不小心放了多个没名字的 ``,那会怎么样?结果是,父组件传进来的同一份内容,会同时填充到所有这些 `` 里。这基本上不是我们想要的效果,往往会导致页面上重复显示,逻辑混乱。
所以,最佳实践很明确:每个组件最多只保留一个未命名插槽。如果你发现自己需要把不同内容塞到组件里的不同位置,那就该用命名插槽了,我们后面会讲到。
好,这节课就到这里,记得动手试试看,有什么问题随时问我。