插槽
當元件中隻有一個插槽的時候，我們可以不設定 slot 的 name 屬性。
v-slot 後可以不帶參數，但是 v-slot 在沒有設定 name 屬性的時候，
插槽口會預設為“default”。
插槽主要是在封裝元件的時候去使用
注意點：v-slot 隻能添加在 <template>上哈。 第一種插槽（匿名插槽）
現在我們封裝一個元件，在元件中可以自定義内容。
這個時候我們就可以使用插槽了。
插槽可以将父頁面中的内容展示在子元件中指定的位置。 父頁面
<template>
<div>
<cha-cao>
<template v-slot>
匿名插槽添加的資料
</template>
</cha-cao>
</div>
</template>
<script setup>
import ChaCao from "../components/ChaCao.vue"
</script> 子元件
<template>
<div>
<h2>我是元件中标題</h2>
<!-- 匿名插槽添加的資料 将會被展示在這裡 -->
<slot></slot>
</div>
</template>
<!-- 由于元件中隻有一個插槽，我們可以不攜帶參數 --> 
解釋
子當元件渲染的時候，<slot></slot> 将會被替換為“匿名插槽添加的資料 ”。
插槽還可以包含任何模闆代碼，包括 HTML，或者其他元件。 第二種插槽（具名插槽）以及插槽簡寫
很多的時候，我們可能在元件的不同位置展示不同的内容。
這個時候我們就需要使用具名插槽。
跟 v-on 和 v-bind 一樣，v-slot 也有縮寫。
(v-slot:) 替換為字元 #
例如 v-slot:header 可以被重寫為 #header： 具名插槽的使用
<template>
<div>
<cha-cao>
<template v-slot:header>
<h2>标題是學習vue3</h2>
</template>
<template v-slot:cont>
<h3>正文是好好學習，天天向上</h3>
</template>
</cha-cao>
</div>
</template>
<script setup>
import ChaCao from "../components/ChaCao.vue"
</script> 子元件
<template>
<div>
<h2>我是元件中标題</h2>
<slot name="header"></slot>
</div>
<p>========================</p>
<div>
<h2>我是正文</h2>
<slot name="cont"></slot>
</div>
</template> 
第三種插槽(作用域插槽)
有時讓插槽内容能夠通路子元件中才有的資料是很有用的。
當一個元件被用來渲染一個項目數組時，這是一個常見的情況，
我們希望能夠自定義每個項目的渲染方式。 作用域插槽的使用
父元件.vue
<template>
<div>
<cha-cao :listArr="arr">
<template v-slot:header="slotProps">
<h1>下面這個電視劇是自定義的哈</h1>
<h1>這就是作用域插槽哈</h1>
<h2 clas>電視劇名稱:{{ slotProps.row.name }} 人物:{{slotProps.row.person }} 序号--{{ slotProps.index }} </h2>
</template>
</cha-cao>
</div>
</template>
<script setup>
import ChaCao from "../components/ChaCao.vue"
let arr=[
{name:'且試天下',person:'豐蘭息'},
{name:'請叫我總監',person:'小橘子'},
{name:'你是我的榮耀',person:'路人甲',slotFlag:true},
]
</script> 子元件
<template>
<ul>
<li v-for="( item, index ) in listArr" :key="index">
<template v-if="!item.slotFlag">
<h2>電視劇名稱:{{ item.name }} 人物:{{item.person }} 序号:{{ index }} </h2>
</template>
<template v-else>
<slot :row="item" name="header" :index="index"></slot>
</template>
</li>
</ul>
</template>
<script setup>
import {defineProps} from 'vue'
defineProps({
listArr:{
type:Array,
default:()=>{
return []
}
},
})
</script> 第四種插槽-寫入插槽
父頁面.vue
<template>
<div class="main">
{{ name }}==
<cha-cao>
<template #[name]>
<div>我在哪裡</div>
</template>
</cha-cao>
</div>
</template>
<script setup lang="ts">
import { ref, } from 'vue'
const name = ref('header')
</script> 子元件.vue
<template>
<div>
<div class="header">
<slot name="header">我是頭部</slot>
</div>
<div class="main">
<slot name="main">我是主體</slot>
</div>
</div>
</template> 寫入插槽與具名插槽的差別？
最大的差別是name是動态的對于寫入插槽來講
具名插槽：具名插槽的name是固定值（靜态值） 遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。
作者：晚來南風晚相識
如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。