vue3插槽
插槽
将
Add todo
// to-do 组件模板
插槽可以包含任何的模板代码
- HTML
- 组件
如果template中没有包含一个
元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃
渲染作用域
- 插槽中使用数据，可以访问与模板其余部分相同的实例property(即相同的作用域)
- 插槽不能访问子组件的作用域
父级模板里所有内容都是在父级作用域中编译的；子模版里的所有内容都是在子作用域中编译的
后备内容
为插槽设置具体的后备（默认的数据）,将默认内容放入slot中
具名插槽
// 子组件
// 不带name的出口带哦与隐含的名字default
作用域插槽
让插槽内容能够访问子组件中的才有的数据
只有子组件可以访问item数据，子组件内的插槽是不可以直接进行访问的
// 要使item可用于提供内容的slot内容，可以添加一个元素并将其绑定为属性
-
绑定在元素上的attribute被称为插槽prop。现在在父级作用域中，问哦们可以使用带值的v-slot来定义我们的提供的插槽prop的名字,只要出现多个插槽，请始终为所有的插槽使用完整的基于的语法
// 名字可任意更换，不带参数的v-slot被假定对应默认插槽
{{slotProps.item}}
解构插槽内容
- 重命名
- 后备内容
动态具名插槽
具名插槽的缩写
v-slot:header => #header,缩写时需要有参数