Vue - 具名插槽和作用域插槽

slot（插槽）可以理解为占位符

一. 具名插槽（使用新的v-slot语法）

• 直接看使用的例子：

注意点：
1. 子组件模板内使用设置一个占位的插槽

2. 父组件内使用替换占位内容

二. 作用域插槽（使用2,6.0新语法，slot-scope已废弃）

• 主要作用：如果想在父组件使用子组件的同时还想访问子组件的数据，除了使用$emit的方法外，作用域插槽也提供了一种解决办法。
• 直接看例子：

效果

注意点

• 不使用作用域插槽的话，父组件使用子组件时无法直接获取子组件的数据（作用域问题）
• 子组件的template中使用v-bind的方式绑定数据到slot上，，这里把title和summary绑定到header插槽上。
• 绑定的数据被收集到slotProps上，通过slotProps就可以访问子组件的数据了

解析