vue中关于动态插槽的使用方法

动态插槽表示有多个插槽，不同的插槽以不同的状态显示。这时候我们可以用动态插槽。插槽名称是一个变量名，其值可以动态修改。下面编程教程网小编给大家简单介绍一下vue插槽的几种方法！

父组件代码：

<button v-for="item in slotList" :key="item.name" @click="changeSlot(item)">
  {{ item.content }}
</button>
<childCom>
  <template #[name]>
     <div>我是{{ name }}插槽</div>
  </template>
</childCom>
<script>
import { reactive, ref } from 'vue'
let name: string = ref('header')
 
type Slots = {
  name: string
  content: string
}
const slotList = reactive<Slots[]>([
  { name: 'header', content: '头' },
  { name: 'body', content: '中间' },
  { name: 'footer', content: '尾' },
])
const changeSlot = (item: Slots): void => {
  name.value = item.name
}
</script>

子组件代码：

<template>
  <div>
  <slot name="header"></slot>
  <slot name="body"></slot>
  <slot name="footer"></slot>
  </div>
</template>