vue 动态插槽 v-slot #

vue 动态插槽

今天遇到一个需求要动态插槽减少template中的代码量，查了好多资料，发现讲的都不够细致，
把我最后实现效果展现出来：

    <el-table
      :columns="columns"
      :data="list"
		<template
		   v-for="item in templateSlot"
		   v-slot:[item]="scope"
		 >
		   <div :key="item">
		     {{ scope.scope.row[item] }}
		   </div>
		 </template>
	</el-table>
	
	  data() {
	    return {
	      // template slot列表
	      templateSlot: [
	        'peom1',
	        'author',
	      ],
	    }
	  }

可以看到主要点在

v-slot:[item]="scope"

如果是写死的情况

v-slot:pemo1="scope"

使用括号 可以动态绑定，且scope可以绑定当前行的数据，用于下面使用。

这部分是vue2.6新增的语法，之前写法是

slot="pemo1"
slot-scope="scope"

其实vue2.6还提供了另一种方式，即通过# 来实现slot的绑定，写法如下

<template #pemo1 >
	 {{  }}
</template>

<template #pemo1="{ scope }" >
	{{ scope.pemo1 }}
</template>

举一反三吧，最上面的写法就如下了：

    <el-table
      :columns="columns"
      :data="list"
		<template
		   v-for="item in templateSlot"
		   #[item]="scope"
		 >
		   <div :key="item">
		     {{ scope.scope.row[item] }}
		   </div>
		 </template>
	</el-table>
	
	  data() {
	    return {
	      // template slot列表
	      templateSlot: [
	        'peom1',
	        'author',
	      ],
	    }
	  }

其他插槽用法还有很多，插槽真的博大精深 还需研究。