插槽是Vue中一种父子组件的通信方式,核心用于父组件向子组件传递模板内容。封装子组件时,会把不确定、需要父组件自定义的部分,用slot标签预留空位;父组件使用子组件时,就能在这个空位中填充任意内容,以此实现组件的灵活复用。
插槽主要分三类:
1. 默认插槽:子组件只预留一个空位,父组件直接在子组件标签内写内容即可;
2. 具名插槽:子组件可预留多个空位,通过name属性给插槽命名,父组件用v-slot指定内容要插入的对应插槽位置;
3. 作用域插槽:子组件把内部数据暴露给父组件,父组件能基于这些子组件的数据,自定义插槽的展示内容。
默认插槽
父组件
子组件
具名插槽
子组件
父组件
作用域插槽
默认作用域插槽
默认作用域插槽父组件接收数据,父组件v-solt跟的是default
子组件可以绑定自己的数据,给父组件
父组件
这个可以让父组件接收到子组件数据做出一些逻辑处理然后,在通知子组件更新自己传来的数据,这样的话显示在插槽的内容就是父组件根据子组件的数据做出的自定义内容
具名作用域插槽
父组件
子组件