vue2.x中slot插槽的使用
| 插槽类型 | Vue2 写法 | Vue3 推荐写法 | 核心说明 |
|---|---|---|---|
| 匿名插槽（默认） | 1. 直接写内容（无标签） 2.<template slot-scope="props">（带数据） | 1. 直接写内容（无标签） 2.<template #default="props">（带数据） 3. 组件根元素v-slot="props"（简写） | 匿名插槽默认名称为default，Vue3 可省略default直接写v-slot="props" |
| 具名插槽 | <template slot="header"> | <template #header> | #header是v-slot:header的简写 |
| 作用域插槽（匿名） | <template slot-scope="props"> | <template #default="props">或<Child v-slot="props"> | Vue3 中匿名作用域插槽可直接绑定到组件根元素 |
| 作用域插槽（具名） | <template slot="header" slot-scope="props"> | <template #header="props"> | 具名 + 作用域插槽合并简写 |
| 动态插槽名 | 不支持 | <template #[name]> | Vue3 仅支持，依赖响应式变量 |
slot翻译为插槽，子组件中有一部分内容可以根据父组件传过来的dom进行显示，用slot标签表示；父组件可以在这个占位符中填充内容。
若是子组件中没有slot，则父组件传给它的任何内容都不显示!
1.匿名插槽
父组件传递到子组件的内容需要子组件用slot来占位置
<!-- 父组件 --><template><div><Child><div>3.8女神节!</div></Child></div></template><!-- 子组件 --><template><div><h1>今天的节日是：</h1><slot></slot></div></template>2.具名插槽
子组件中name的名字与父组件中slot的值相对应, 没有提供 name 的 出口会隐式地命名为default
<!-- 父组件 --><template><div><Child><div