04 vue3 插槽的使用

在开发中,我们通常会封装一个个组件,进行复用提高开发效率

一般是父组件通过props传递给子组件,子组件进行展示

但是,可能我们有时候需要父组件控制子组件通过什么方式展示数据,列如div,span等

所有,我们在封装子组件时不能写死,要让父组件决定,所以我们使用插槽

什么是插槽

插槽的使用过程其实是抽取共性、预留不同;

我们会将共同的元素、内容依然在组件内进行封装;

同时会将不同的元素使用slot作为占位,让外部决定到底显示什么样的元素

插槽基本使用

04 vue3 插槽的使用_第1张图片

04 vue3 插槽的使用_第2张图片

 插槽的默认显示内容

04 vue3 插槽的使用_第3张图片

04 vue3 插槽的使用_第4张图片

 多个插槽效果

04 vue3 插槽的使用_第5张图片

04 vue3 插槽的使用_第6张图片

04 vue3 插槽的使用_第7张图片

 很显然这不是我们想要的效果

具名插槽的使用

上面当我们子组件有多个插槽时,我们又想父组件决定插槽分别渲染什么,我们可以使用具名插槽

04 vue3 插槽的使用_第8张图片

 插槽没有声明名称时,有默认名称,name="default"

04 vue3 插槽的使用_第9张图片

04 vue3 插槽的使用_第10张图片

 动态插槽名

目前我们使用的插槽名称都是固定的;

比如 v-slot:left、v-slot:center等等;

我们可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称

04 vue3 插槽的使用_第11张图片

 具名插槽缩写

 v-slot:替换成#

04 vue3 插槽的使用_第12张图片

 作用域插槽的使用

当子组件渲染列表时

04 vue3 插槽的使用_第13张图片

 使用插槽作用域

04 vue3 插槽的使用_第14张图片

04 vue3 插槽的使用_第15张图片

你可能感兴趣的:(vue3知识总结,javascript,前端,vue.js)