深入理解插槽(v-slot)

一、插槽是什么？

个人理解插槽就是一个占位符，留位置用的。

二、插槽的分类

1.具名插槽

插槽的 v-slot 简写 # ，具名插槽就是指带有名子的插槽，可以进行分辨，比如#header
插槽的内容在头部，#footer尾部的插槽，当我们不写名子的时候默认的是中间，比如我们直接写其实默认的是我们使用的是 <v-slot #default>来进行使用，我们是插入在中间的。
总结来将就是 ： 组件内部预留位置 我们给插槽名子来进行预留传入组件，当我们不给的时候传入的是默认的–>
代码如下（示例）：

>我们在注册组件进行插值
 <task-excel>
      <template v-slot:header>今天是个好天,真的不错呀今天是个好天,真的不错</template>
      <v-slot> 7415263</v-slot>
  </task-excel>
 <在组件页面
 <template>
  <div class="total">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <v-slot></v-slot>
    </main>
    <footer>
      <v-slot #footer></v-slot>
    </footer>
    </templete>

2.作用域插槽

作用域插槽的作用是组件之间进行插值，总结来讲就是取代父亲的值

代码如下（示例）：
例如 element中的table自定义组件时一样我们通过 v-slot直接将样式来进行结构出来
我们可以通过 v-slot直接把row $index colum等值来进行结构出来，做我们想要做的事情。

  <el-table
    :data="tableDataTwo"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template v-slot = "{row}">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px;color:green">{{row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template v-slot="{row}">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ row.name }}</p>
          <p>住址: {{ row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="{row,$index}">
        <el-button
          size="mini"
          @click="handleEdit($index, row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete($index,row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

该处使用的url网络请求的数据。

---

在这里插入图片描述