Vue3 中插槽的使用，插槽是 Vue 中的一個特別特性，插槽就是模版內容。例如<h1>標題 1</h1>標題 1 就是插槽，Vue 是無法識別模板內容的，只能通過屬性進行傳遞。Slot 主要包括默認、具名和作用域。Slot開發起來難度不大，看如下代碼：
插槽
首先在組件中插槽定義：
<slot></slot>父組件不做任何指定時，所有內容均顯示在默認插槽中。
<slot name="slot1"></slot>父組件中需要指定名字
作用域插槽是一種子組件向父組件傳遞參數的方式，默認情況下父組件插槽內容只能使用父組件定義的變量，作用域插槽可以將子組件中的參數向父組件進行傳遞。
<template><slot></slot><slot name="slot1"></slot><slot name="slot2" v-bind="params"></slot>
</template>
<script setup lang="ts">
import { reactive } from 'vue';type user = {"name":string
}const params = reactive<user>({name:"www"})</script>在父組件中使用插槽。
<template>
<SlotView><div>默認 Slot</div><template #slot1><div>具名 Slot</div></template><template #slot2="params"><div>作用域插槽 {{params.name}}</div></template>
</SlotView>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import SlotView from './slots.vue'const params = reactive({name:"參數 name"})</script>
<style>
.c1{background-color: royalblue;
}
</style>
總結
Vue 中插槽使用很普遍，在各類組件庫中都很常見。
)
