vue3-Slots

文档链接

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

说明

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

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

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

应用场景

增加说明

引用组件填充内容

 说明组件新增插槽

效果

 

posted @ 2024-04-03 15:54  意犹未尽  阅读(41)  评论(0编辑  收藏  举报