vue的slot组件的入门

slot组件的入门

目录结构如下：

1.slot的常见用法

slot又叫插槽，常见用法如下：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 的模板中可能会写为

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

这是官网上的一个例子，我相信这才是绝大多数slot的应用场景，起初我在读文档的时候，对于该方法一扫而过，以为没什么用，然而，在我对element组件二次封装的时候，用到了它，调用的时候是如下的：

    <sir-table :data="tableData5">
      <el-table-column label="商品 ID" prop="id">
      </el-table-column>
      <el-table-column label="商品名称" prop="name">
      </el-table-column>
      <el-table-column label="描述" prop="desc">
      </el-table-column>
    </sir-table>

我要全局封装的组件的html结构是如下的：

<template>
  <div class="sir-table">
    <el-table :data="showData" style="width: 100%">
      <slot></slot>
    </el-table>
  </div>
</template>

如果我封装的时候，没有slot标签，我的全局组件，将会接收不到sir-table中的值，和官网上的例子大同小异，这让我不得不重视起了slot的用法。

2.slot的具名插槽

敲黑板！！重点！！我们可以通过template的slot属性来知道要显示的插槽

<base-layout>
  <template slot="slotone">
    <h1>this is slot1</h1>
  </template>
  <template slot="slottwo">
    <h1>this is slot2</h1>
  </template>
 </base-layout>

下面是我们定义好的base-layout组件

<div class="container">
  <header>
    <slot name="slotone"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="slottwo"></slot>
  </footer>
</div>

就这样，通过slot的name属性，调用组件的一方，可以将值传到对应的slot中。

3.作用域插槽

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 组件的模板可能包含了如下代码：

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。

为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个<slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽：在这个例子中，这个数据是 todo 对象：

<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> 组件的时候，我们可以选择为待办项定义一个不一样的 这里<template>作为替代方案，并且可以通过 slot-scope 特性从子组件获取数据：

<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>

生活不易，如果觉得文章对你有帮助，请鼓励一下小编！