vue3-Slots

文章主目录

• 文档链接
• 说明
• 应用场景

回到顶部

文档链接

https://cn.vuejs.org/guide/components/slots.html#slots

回到顶部

说明

slot 插槽，是子组件提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码。主要作用就是更好的拓展和定制化组件，例如弹窗组件、表格组件等。分为默认插槽、具名插槽和作用域插槽。

其中前两个都是渲染在父级，本质上就是替换，父组件渲染完毕之后替换对应的 slot；区别在于具名插槽就是给插槽取了名字；

而作用域插槽在组件内部渲染。本质上会把父组件的内容渲染成函数，子组件调用函数，并且将数据传递给它。当需要将子组件的数据交给父组件展示，此时就可以使用作用域插槽。给数据一个新的作用域，因此叫做作用域插槽。

回到顶部

应用场景

增加说明

引用组件填充内容

 说明组件新增插槽

效果