vue 插槽那些事

一、创作灵感

今天早上闲着没事，就把项目里面的组件思考了一下，怎么封装的，然后最先看的就是table组件。因为每个中后台管理系统都离不开table对吧，然后table有的插槽有一个action的插槽，一般我们对插槽都会对action的按钮进行二次封装。封装不得传按钮么，但是我没看到插槽名字，所以看了一下，才想起来默认插槽。所以接下来介绍一下vue插槽。

二、插槽

1、默认插槽

        我们可以在组件引用的时候写一些节点，这些节点可以事任意数量的，且没有名字的。如

         <CollapseBtn :size="4">
            <div class="ant-btn-link" @click="onAction('view', record)">查看</div>
            <div class="ant-btn-link" @click="onAction('modify', record)">修改</div>
            <div class="ant-btn-link" @click="onAction('add', record)">新增</div>
            <a-popconfirm
              title="删除后不可恢复，确定删除？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onAction('delete', record)"
            >
              <div class="ant-btn-link">删除</div>
            </a-popconfirm>
          </CollapseBtn>

然后在组件内部接收。

import { Dropdown, Icon, Menu, Space } from 'ant-design-vue'
const CollapseBtn = {
  name: 'CollapseBtn',
  props: { size: { type: Number, default: 2 } },
  render() {
    const { size } = this
    // 此处就是获取那一推button的tag标签
    const children = this.$slots.default?.filter(c => c.tag) || []
    const isColl = children.length > size
    let cache = []
    if (isColl) {
      cache = children.splice(size, children.length + 1)
    }

    return (
      <Space class="h-collapse-btn">
         {
          //标签展示
        }
        {children}
         {
          //判断是否超过设置的size值
        }

        {isColl && (
          <Dropdown overlayClassName="table-action-dropdown">
            <div class="collapse-trigger">
              <Icon
                type="ellipsis"
                style={{
                  fontSize: '16px',
                  color: 'var(--primary-color)',
                  cursor: 'pointer'
                }}
              />
            </div>

            <Menu slot="overlay" class="h-collapse-menu">
              {cache.map(c => {
                return <Menu.Item>{c}</Menu.Item>
              })}
            </Menu>
          </Dropdown>
        )}
      </Space>
    )
  }
}

export default CollapseBtn

这样默认插槽就被运用起来了。

2、具名插槽

       具名插槽就是平时用的很多的了，在组件被引用的时候传入一个有名字的插槽。在组件内部申明一个占位符（有名字插槽放置的位置）。所以这个不写例子，所以主要介绍一下具名插槽的循环生成。

下面代码是在父组件里面生成插槽。

<template v-for="item in templateList" v-slot:[item]="{ record }">
        <div
          :key="item"
          style="position: relative; padding: 8px"
          class="content"
        >
          <div
            v-for="(data, i) in dealList(record?.applies, item)"
            :key="i"
            :class="['card-item', `color_${Math.floor(Math.random() * 5)}`]"
          >
            <div class="big">
              {{
                moment(data.applyStartTime).format('HH:mm') +
                '-' +
                moment(data.applyEndTime).format('HH:mm')
              }}
            </div>
            <div class="small">{{ data.name }}</div>
          </div>
          <div class="z-mask">
            <a-button class="cbtn" @click="apply(record.id, item)">
              点击预定
            </a-button>
          </div>
        </div>
      </template>

当然这里也可以不循环生成n个具名插槽，可以一个个的写。

下面是在子组件里面接受插槽

    <template v-for="slot in $slots" v-slot:[slot]>
      <SlotRender :key="slot" :slot-node="$slots[slot]" />
    </template>


/

export default {
  name: 'SlotRender',
  props: ['slotNode'],
  render() {
    return <div>{this.slotNode}</div>
  }
}

来自前端菜鸟的理解。
（最近在学three.js，学会了和大家分享）