学习Vue之路——插槽

在学习Vue的时候，面试的时候经常会被问到插槽，之前不会的时候让我自己封装一个tab插件的思路是什么，我傻傻的说传一个数据对象进去。。面试官就不理我了。。。
插槽主要分成三种：单个插槽，具名插槽和作用域插槽
单个插槽
单个插槽是最简单易懂的和最常用的；在模版中使用插槽可接受模版使用的时候传过来的内容，替代模版內的默认内容，向组件中传递不带 slot 特性的子元素时，比如test中的乖乖，这些子元素被存储在组件实例中的 $slots.default 中
有一个组件test；test模版里面的代码

<template>
    <h1>hello!</h1>
    <slot>使用的时候没有传入数据是我的内容显示，传入内容我就不显示</slot> //插槽的默认内容
</template>

有一个组件需要使用这个test组件，在使用的时候的用法：

<test>乖乖</test> //最后结果显示hello！乖乖

由于我实在太懒了 下面直接拿官方的例子

使用场景：
在同一样的结构下，某一个部分下需要使用不同的模版，假如我有一个页面，拥有同一样的头和尾 这个时候我就只需要给中间的部分传一个不同的slot，可以拥有不同的数据结构。我自己理解的与子组件的不同之处是这个可以传入不同的html结构，而子组件只能传入数据，结构是一样的。 还有ui组件的tab组件的内容就是使用了slot

具名插槽
有些时候我们需要多个插槽。简单来说，就是需要给插槽命名，分别窜地给名字相同的地方。对于这样的情况，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽。定义的组件里面的代码：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot> //这个是未命名插槽，在使用的时候未指定名字的将会匹配到这里
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

在向具名插槽提供内容的时候，我们可以在一个父组件的 <template> 元素上使用 slot 特性，或者直接用在普通元素上也是可以的

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

   <p slot="footer">Here's some contact info</p>
</base-layout>

应用场景：这个比较灵活，比如一个页面有多处需要分发不同的内容的时候使用。

作用域插槽
提供的组件带有一个可从子组件获取数据的可复用的插槽。简单说来跟前面两种不同的情况就是 前面两种渲染的数据是从使用的组件决定，作用域插槽就是数据由封装的组件决定
在通过slot元素，使用v-bind的形式绑定属性传递给父元素，父元素通过slot-scope属性来接收属性
定义组件：

<ul>
  <li v-for="todo in todos" :key="todo.id">
    <!-- 我们为每个 todo 准备了一个插槽，-->
    <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
    <slot :todo="todo"> //这里的todo就是传递给父元素接受的数据
      <!-- 回退的内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

使用的时候的组件：

<todo-list v-bind:todos="todos"> 这里todo-list里面使用的数据是通过props传递进去的，也可以在子元素里面定义数据
  <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
  <template slot-scope="slotProps">  //slotProps是接收todo-list传过来的数据的
    <!-- 为待办项自定义一个模板，-->
    <!-- 通过 `slotProps` 定制每个待办项。-->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

使用场景：同样的内容和数据在不同的地方使用不同的样式可使用作用域插槽。在父组件里面自定义样式。(自己的理解，可能不对)。