vue-插槽的使用方法

前言

记录一下在项目中使用到的插槽，在vue项目中，使用到的插槽还挺多的

定义： 把不确定的、希望由具体页面指定的部分定义为插槽，即组件封装期间，为 具体页面预留的占位符

默认插槽

<!-- 父组件中: -->
<son>
  <div>插槽内容</div>
</son>

<!-- 子组件中: -->
<template>
  <div>
    <!--定义插槽-->
    <slot>插槽默认内容</slot>
  </div>
</template>

如果父组件中使用子组件时，中间没有定义一个div或者其他标签，就会显示插槽默认内容

如果中间定义了标签，就会显示标签里面的内容，比如上面的插槽内容

具名插槽

一个组件可能存在许多插槽，可能都在不同的地方，所以需要命名

<!-- 普通使用方法： -->
<view slot="title"></view>

<!-- 定义： -->
<slot name="title"></slot>

数据插槽

在使用组件时，需要携带数据过去，如下：

<!-- 父组件使用： -->
<template v-slot:title="{ count }">
  <text>
    <span class="file-card">
      登记证
      <u-badge
        :count="count"
        type="error"
        size="mini"
        :offset="[-10, -10]"
      ></u-badge>
    </span>
  </text>
</template>

<!-- 定义： -->
<slot name="title" :count="newFileCount"></slot>

踩坑记录

之前踩过一次坑，father和son组件都存在obj，obj是从father传入son中去的，但是又从son中定义数据插槽，所以当father组件的obj改变时，但是son的obj未改变，所以son组件的插槽中的页面一直没有重新渲染，请教了同事，才发现vue官网有这么一句话：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

a-table中的表头插槽

虽然ant design中的table功能比较齐全，但是还是有需要到使用到插槽的地方，比如动态表头，表头数据需要编辑等等

在column中定义一个命名为distance2的插槽：

{
    
    
    align: 'center',
    slots: {
    
     title: 'distance2' }, // title属性置空
    children: [
      {
    
    
        title: '设计',
        align: 'center',
        width: '100px',
        dataIndex: 'VDesign2',
        scopedSlots: {
    
     customRender: 'vDesign2' },
      },
      {
    
    
        title: '实测',
        align: 'center',
        width: '100px',
        dataIndex: 'VActual2',
        scopedSlots: {
    
     customRender: 'vActual2' },
      },
      {
    
    
        title: '差值',
        align: 'center',
        width: '100px',
        dataIndex: 'VDeviation2',
        scopedSlots: {
    
     customRender: 'vDeviation2' },
      },
    ],
},

在a-table中使用：

<template slot="distance2">
  距中桩2
  <br />
  <a-input-number
    :precision="3"
    v-model="CS102_M1.Distance2"
    :ref="'inputValTopI2'"
    @pressEnter="pressEnter(-1, 'Top', 3)"
    @blur="fixedNum(CS102_M1, 'Distance2', CS102_M1.Distance2, 3)"
  />
</template>