关于vue插槽的基础使用

125 阅读1分钟

vue插槽

  1. 组件通过插槽传入自定义结构
  2. 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
  3. vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽

格式

在定义组件时,在template中用slot来占个坑
使用时,将组件之间的内容来填坑

image.png

组件进阶-具名插槽

格式

 定义: <slot name="xxx">

 使用:
 <template #xxx></template>;
 <template v-slot:xxx></template>

image.png

组件进阶-作用域插槽

应用场景:自定义表格组件,允许用户传入:自定义结构+数据(从插槽中回传)

步骤

image.png

  • 创建子组件, 准备slot, 在slot上绑定属性和子组件值
  • 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
  • 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置

image.png