20250417-vue-动态插槽名

动态指令参数在 v-slot 上也是有效的，即可以定义下面这样的动态插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

子组件代码

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">默认标题</slot>
    </div>
	
	<div class="card-subheader">
	  <slot name="subheader">默认子标题</slot>
	</div>
    
    <div class="card-content">
      <slot></slot>
    </div>
    
    <div  class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<style>
  .card {
    border: 1px solid black;
    padding: 0;
  }

  .card-header {
    background-color: skyblue;
    padding: 4px;
  }
  
  .card-subheader {
    background-color: mediumpurple;
    padding: 4px;
  }

  .card-content {
    padding: 4px;
  }

  .card-footer {
    background-color: lightgray;
    padding: 4px;
  }


</style>

父组件代码

<template>
	<Card>
		<template v-slot:[headerOrSubHeader]>
			<h1>标题</h1>
		</template>

		<template #default>
			<p>内容</p>
		</template>

		<template #footer>
			<em>底部</em>
		</template>
	</Card>
	
	<button @click="switchSlot">点击切换插槽</button>
</template>

<script>
	import Card from './Card.vue'
	export default {
		data() {
			return {
				headerOrSubHeader:'header'
			}
		},
		components:{
			Card
		},
		methods:{
			switchSlot(){
				this.headerOrSubHeader==='header' ? this.headerOrSubHeader='subheader' : 
				this.headerOrSubHeader='header'
				console.log(this.headerOrSubHeader)
			}
		}
	}
</script>