vue插槽
- 组件通过插槽传入自定义结构
- 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
- vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽
格式
在定义组件时,在template中用slot来占个坑
使用时,将组件之间的内容来填坑
组件进阶-具名插槽
格式
定义: <slot name="xxx">
使用:
<template #xxx></template>;
<template v-slot:xxx></template>
组件进阶-作用域插槽
应用场景:自定义表格组件,允许用户传入:自定义结构+数据(从插槽中回传)
步骤
- 创建子组件, 准备slot, 在slot上绑定属性和子组件值
- 使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"
- 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置