0. 組件和插槽區別
組件是Vue插槽中最為關鍵的一個特性之一，而插槽是組件的一大亮點。插槽是為組件服務的，讓組件更靈活多用。
1. 默認插槽、具名插槽的通用格式（#myName 是 v-slot:myName的縮寫）：建議使用通用格式
<template> 元素中的所有內容都將會被傳入相應的插槽。
<組件名稱>
<!-- 在template上寫樣式不起效 -->
<template #myName> //#myName 是 v-slot:myName 的縮寫，默認插槽可以寫 #default <p>具體內容1</p> <p>具體內容2</p> <p>具體內容3</p> </template> <組件名稱/>
slot.vue
<div class="box"> <h4>默認插槽 Header</h4>
<!-- 在slot上寫樣式、事件也不生效 -->
<slot>我是默認插槽的備選內容</slot> <h4> 默認插槽footer</h4> </div>
app.vue 通用格式使用默認插槽
<SlotDemo> <template #default> //不帶 name 的 <slot> 出口會帶有隱含的名字“default” <img src="./assets/logo.png" alt=""> <p class="slot-red">我是默認插槽內容1 </p> <h3 class="slot-red">我是默認插槽內容2</h3> </template> </SlotDemo>
2. 默認插槽也可以省略template標簽，直接寫具體內容（但不能有template標簽卻沒有v-slot：）
app.vue
<SlotDemo> <img src="./assets/logo.png" alt=""> <p class="slot-red">我是默認插槽內容1 </p> <h3 class="slot-red">我是默認插槽內容2</h3> </SlotDemo>
3. 具名插槽的 v-slot： 必須寫在 template 上
slot.vue
<div class="box"> <div>我是頭部</div> <slot name="myName">我是具名插槽的備選內容</slot> <div>我是尾部</div> </div>
app.vue
<SlotDemo> <template #myName> <p class="slot-red">我是具名插槽內容1</p> <p class="slot-red">我是具名插槽內容2</p> <img src="./assets/logo.png" /> </template> </SlotDemo>
4. 只要出現多個插槽，請始終為所有的插槽使用完整的基於 <template> 的語法（通用格式）。
5. 作用域插槽
作用域插槽可以讓 app.vue 訪問到組件內部data中的數據。
（有時讓插槽內容能夠訪問子組件中才有的數據是很有用的。當一個組件被用來渲染一個項目數組時，這是一個常見的情況，我們希望能夠自定義每個項目的渲染方式。）
SlotDemo.vue
<!-- 作用域插槽 --> <!-- user, msg 是data{}中的數據；info，message 是app.vue中解構時的名稱 --> <slot name="zuoyongyu" :info="user" :message="msg"></slot>
data() {
return {
user: {
name: "Lucy",
address: "上海市靜安區",
phone: 12345678901,
},
msg:"hello world"
};
},
App.vue（第一種訪問作用域插槽數據的方法：直接接收數據）
<SlotDemo> <template #zuoyongyu="scoped"> <p>{{ scoped }}</p> </template> </SlotDemo>
App.vue（第二種訪問作用域插槽數據的方法：解構接收數據）
<SlotDemo> <template #zuoyongyu="{info,message}"> <p>{{info}}</p> <p>{{message}}</p> </template> </SlotDemo>
