vue 插槽

插槽的作用

为了让组件内的标签也可以自定义,提高了组件的灵活性

默认插槽

• 组件内使用slot标签占位
• 在使用组件时在开闭标签中传入自定义标签
  

效果图

设置默认内容

在slot标签内的内容就是默认内容

效果图

具名插槽

1. 作用
   1. 希望组件内有多处标签是自定义的
   2. 给插槽取个名字
2. 用法
   1. 给slot设置name属性
   2. 使用组件时通过 template 结合 v-slot 指定name
3. v-slot: 可以简写成 #

效果图

作用域插槽

1. 作用:希望使用组件时,可以访问组件内部的数据
2. 用法:
   1. 给slot标签动态绑定数据
   2. 使用组件通过template结合v-slot="自定变量名"来接收数据
   

效果图