关于vue使用slot

vue 里面组建api有三种
1.props：实现数据传参
2.events：实现触发事件
3.slot：实现内容分发

单个slot

组件包含一个slot
组件模版：

<div>
	<p>我是组件中自带的段落</p>
	<slot>如果没有需要插入的内容，就显示我啦～</slot>
</div>

结论：
1.如果我们不需要渲染内容，则显示slot原本的内容：“如果没有需要插入的内容，就显示我啦～”
2.如果我要渲染：

<bigbig>
	<p>我是需要渲染的内容</p>
</bigbig>

则页面会先显示“我是组件中自带的段落”，再显示“我是需要渲染的内容”

具名slot

也就是说带有名字的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>