vue 动态插槽与插槽循环的用法

1. 普通插槽

// 子组件:AppForm
...
<div>
  <slot name="custom" :prop="key"></slot>
</div>
...



// 引用子组件
...
<AppForm>
  <template #custom="{prop}">
    ...
  </template>
</AppForm>
...

注： name 属性的值为插槽名， prop 为插槽传递的参数之一（ prop 可以是随便定义的名字），获取插槽的传参时可以用解构的写法直接使用prop 的值。

2. 动态插槽

适用场景为：组件的插槽名无法固定的情况，如插槽很多且内容不固定时

// 子组件APPForm
...
<div v-if="type === 'custom'">
  <slot :name="key" :prop="key"></slot>
</div>
...



// 引用子组件
...
<AppForm>
  <!--key是插槽的名字,可以是data里定义的动态值-->
  <template v-slot:[key]="{prop}">
    ...
  </template>
</AppForm>
...

3. 插槽循环

适用场景为：组件内有多个内容相同的插槽

// 子组件APPForm
...
<div v-if="type === 'custom'">
  <slot :name="key" :prop="key"></slot>
</div>
...



// 引用子组件
...
<AppForm>
  <!--customKeys:string[]-->
  <template v-for="key in customKeys" v-slot:[key]="{prop}">
    ...
  </template>
</AppForm>
...