VUE中具名插槽和匿名插槽的使用

在我的项目中由于使用的是vue+element一个自用框架进行开发，插槽用法相较简单

比如在列表字段columns使用slotname即可

<template v-slot:_spec="{ row, column }">
          {{ specMap[row.materialCode]&&(row.stockNum !== 0 ) ? specMap[row.materialCode].specificationType : '--' }}
</template>


export default {
  name: 'StockList',
  data() {
    return {
    columns: [
       {
          slotName: '_spec',
          prop: 'spec',
          label: '规格',
          align: 'center',
          'show-overflow-tooltip': true
        },
   }
  }
}        

上下使用自定义slotName即'_spec'进行连接

 

 

 但总有一些无法使用的情况，所以看了一下

普通情况下vue匿名slot使用方法为

<div class="myComponent">
  <slot></slot>
</div>
//使用方法
<my-component>
  <p>我就是slot的替代内容，这里可以放任何标签元素</p>
</my-component>

具名slot使用

<div class="myComponent">
  <slot name="mySlot"></slot>
</div>
//使用方法
<my-component>
//注意slot="mySlot"为必须，即具名slot意义
  <p slot="mySlot">
    我就是这个叫mySlot的slot替代内容，这里可以放任意标签，*任意*
  </p>
</my-component>