vue 里面组建api有三种 1.props：实现数据传参 2.events：实现触发事件 3.slot：实现内容分发
组件包含一个slot 组件模版：
<div> <p>我是组件中自带的段落</p> <slot>如果没有需要插入的内容，就显示我啦～</slot> </div>结论： 1.如果我们不需要渲染内容，则显示slot原本的内容：“如果没有需要插入的内容，就显示我啦～” 2.如果我要渲染：
<bigbig> <p>我是需要渲染的内容</p> </bigbig>则页面会先显示“我是组件中自带的段落”，再显示“我是需要渲染的内容”
也就是说带有名字的slot,当插槽不止一个时，就需要给带上name属性为了区分他们
本质上是可以传递数据的插槽，类似于父组件可以通过绑定数据传递给自组件，作用域插槽就可以通过子组件绑定数据传递给父组件。
<ul> <li v-for="todo in todos" v-bind:key="todo.id" > <!-- 我们为每个 todo 准备了一个插槽，--> <!-- 将 `todo` 对象作为一个插槽的 prop 传入。--> <slot v-bind:todo="todo"> <!-- 回退的内容 --> {{ todo.text }} </slot> </li> </ul> <todo-list v-bind:todos="todos"> <!-- 将 `slotProps` 定义为插槽作用域的名字 --> <template slot-scope="slotProps"> <!-- 为待办项自定义一个模板，--> <!-- 通过 `slotProps` 定制每个待办项。--> <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }} </template> </todo-list>