1.插槽内容
- 组件外：写入模板内容，内容可为任何模板代码
- 组件内：通过元素< slot >< /slot >进行模板引入
- 编译作用域：父级模板内容在父级作用域编译，子级模板内容在子级作用域编译
- 后备内容：< slot >自定义默认值< /slot >
2.具名插槽
- 组件内：< slot name = “名称” > ，不带name则隐含名字default
- 组件外：<template v-slot:名称>内容< /template > ，没有v-slot则为默认插槽内容
3.作用域插槽
- 组件内：< slot v-bind:user=“user” >，元素上的属性user为插槽prop
- 组件外：< template v-slot:default=“slotProps” >，slotProps为包含所有插槽prop的对象
- 默认插槽缩写语法：仅有默认插槽情况下v-slot:default => v-slot，可直接用在组件上
- 解构插槽：v-slot:default=“slotProps” => v-slot:default="{user}"
- 重命名：v-slot:default="{ user: person }"
- 后备内容：v-slot:default="{ user = { firstName: ‘Guest’ } }"
4.其他
- 语法缩写：v-slot:user => #user (v-slot => #)
- 插槽访问：
- this.$slots：访问静态插槽内容
- this.$scopedSlots：访问作用域插槽
- 2.6版本废弃语法：
- slot属性：具名插槽，可用在template或者普通元素上
- slot-scope属性：作用域插槽，可用在template或者普通元素上
|