Loading... ## 引言 既然上篇文章写到了 React 的 render props ，那就顺便复习一下 Vue 的插槽吧 ## 理解 插槽其实就是在组件中留下一个空位置，等到你需要时再将内容放进去。就像是我们小时候常玩红白机，主机和手柄是不变的，想玩什么游戏就把对应的游戏卡插进去就可以愉快的玩耍了，你可以随时更换其他的游戏卡。插槽亦是如此。 ## 匿名插槽 - Parent ```jsx <Child> 插槽 </Child> ``` - Child ```jsx <slot/> ``` ## 具名插槽 - Parent ```jsx <Child > <template #oneSlot> oneSlot </template> <template #twoSlot> twoSlot </template> <template #threeSlot> threeSlot </template> </Child > ``` - Child ```jsx <slot name="oneSlot"/> <slot name="twoSlot"/> <slot name="threeSlot"/> ``` ## 作用域插槽 - Parent ```jsx <Child > <template #oneSlot="scope"> {{ scope.num }} </template> </Child > ``` - Child ```jsx <slot name="oneSlot" :num="num"/> ``` ## 注意 从 ```Vue 2.6``` 以后新增加了 ```v-slot```，你可以理解为 ```slot``` 与 ```slot-scope``` 的融合，写法为 ```v-solt:oneSlot="scope"``` ，简写为 ```#oneSlot="scope"```，并继续兼容旧版写法 从 ```Vue 3.x``` 开始，完全剔除了旧版写法 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏