什麼是slot插槽
（1）slot插槽的目的：讓我們原來的設備具備更多的擴展性
（2）組件的插槽：組件的插槽也是爲了讓我們的封裝更具有擴展性，讓使用者可以決定組件內部的一些內容到底展示的是什麼
例如： 某寶各個頁面的導航欄它既有相同的部分又有不相同的部分，那麼這個組件就不能是固定下來的，其不同的部分就要用到插槽（抽取共性、保留不同）
插槽的使用
1、插槽基本使用：在組件模板中使用 slot
2、插槽的默認值：如果沒有在該組件中插入任何其它元素則顯示默認值，有其它元素則替換默認值
3、如果有多個值，同時放入組件進行替換時，一起作爲替換元素
註釋部分爲特別關注
<body>
// <!-- 父組件模板 -->
<div id="app">
// <!-- 插槽基本使用，顯示默認值 -->
<cpn></cpn>
<!-- 替換默認值 -->
<cpn><button>點我</button></cpn>
// <!-- 多個值替換默認值 -->
<cpn>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
</cpn>
</div>
//<!-- 子組件模板 -->
<template id="cpn">
<div>
<h2>----------</h2>
<slot><h2>我是默認值</h2></slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"我是Vue實例"
},
components:{
cpn:{
template:"#cpn",
}
}
})
</script>
</body>
具名插槽
當有多個插槽時，使用具名插槽。不同的插槽要有不同的name
步驟：
（1）在組件模板中對多個 slot 插槽 取不同的name
（2）在父模板中替換某一插槽的默認值時使用slot屬性
註釋部分爲特別關注
<body>
// <!-- 父組件模板 -->
<div id="app">
//顯示默認值
<cpn></cpn>
// <!-- 替換標籤要用slot屬性 -->
<cpn><h5 slot="center">我替換了左邊</h5></cpn>
</div>
//<!-- 子組件模板 -->
<template id="cpn">
<div>
<h2>-------</h2>
//<!-- 不同的插槽有不同的name -->
<slot name="left"><span>左</span></slot>
<slot name="center"><span>中</span></slot>
<slot name="right"><span>右</span></slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"我是Vue實例"
},
components:{
cpn:{
template:"#cpn",
}
}
})
</script>
作用域插槽
什麼是編譯作用域
注意：
（1）父組件模板中所使用的變量都會到Vue實例中查找
（2）子組件模板中所使用的變量都會到組件中查找
註釋部分爲特別關注
<body>
//<!-- 父組件模板 -->
//<!-- 所使用的變量都會到Vue實例中查找 -->
<div id="app">
<cpn v-show="isshow"></cpn>
</div>
//<!-- 子組件模板 -->
<template id="cpn">
<div>
<h2>我是子組件</h2>
//<!-- 所使用的變量都會到組件中查找 -->
<h2 v-show="isshow">我不會顯示</h2>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"我是Vue實例",
//父組件中變量
isshow:true
},
components:{
cpn:{
template:"#cpn",
},
//子組件中變量
data(){
return {
isshow:false
}
}
}
})
</script>
</body>
作用域插槽使用方法
作用域插槽：使用slot-scope
注意：
（1）在子組件模板中要綁定data
（2）在父組件模板中首先要使用template作爲根標籤，在<template中添加slot-scope="slot"
（3）在template中就可以使用slot.data來對子組件的數據作相應的改變
註釋部分爲特別關注
<body>
//<!-- 父組件模板 -->
<div id="app">
<cpn></cpn>
<cpn>
//<!-- 獲取子組件中的books數據 -->
<template slot-scope="slot">
<span v-for="book in slot.data">{{book}}--</span>
</template>
</cpn>
<cpn>
//<!-- 獲取子組件中的books數據 -->
<template slot-scope="slot">
//去掉最後的“--”
<span>{{slot.data.join("-")}}</span>
</template>
</cpn>
</div>
//<!-- 子組件模板 -->
<template id="cpn">
<div>
<slot :data="books">
<ul>
<li v-for="book in books">{{book}}</li>
</ul>
</slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"我是Vue實例",
},
components:{
cpn:{
template:"#cpn",
data() {
return {
books:["紅樓夢","西遊記","三國演義","水滸傳"]
}
}
}
}
})
</script>
</body>
插槽最新使用方法
在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope這兩個目前已經被廢棄但是爲被移除的特性。
我在這裏將使用v-slot指令對上述例子做更改，但效果相同
具名插槽v-slot寫法
（1）在下面代碼中，我只展現了更改的部分，其餘代碼與上面具名插槽是一樣的
（2）使用方法：使用v-slot : name ,並且要特別注意v-slot 只能添加到 \<template> 或自定義組件上，這點與棄用的 slot 屬性不同
（3）如果想調用默認插槽，可以使用使用v-slot : default
//<!-- 父組件模板 -->
<div id="app">
//<!-- 顯示默認值 -->
<cpn>
<template v-slot:default>
<h2>不會顯示我</h2>
</template>
</cpn>
// <!-- 替換標籤要用 v-slot: name-->
<cpn>
<template v-slot:center>
<h5>我替換了左邊</h5></cpn>
</template>
</div>
作用域插槽最新寫法
（1）在下面代碼中，我只展現了更改的部分，其餘代碼與上面作用域插槽是一樣的
（2）使用方法：v-slot ：name=後邊是組件內部綁定作用域值的映射slot props（name可以爲default【默認】也可以是插槽的名字【具名名插槽】）。綁定到 子組件<slot> 元素上的屬性我們稱之爲 slot props ，在父組件模板中使用slotprops.數據名.變量名
（3）在下面例子中我選擇slotProps 作爲 slot props 的名字，這個名字可以自定義的。
//<!-- 父組件模板 -->
<div id="app">
<cpn></cpn>
<cpn>
// <!-- 獲取子組件中的books數據 -->
//更改部分
<template v-slot="slotProps">
<span v-for="book in slotProps.data.books">{{book}}--</span>
</template>
</cpn>
<cpn>
//<!-- 獲取子組件中的books數據 -->
//更改部分
<template v-slot="slotProps">
//<!-- 去掉最後的“--” -->
<span>{{slotProps.data.join("-")}}</span>
</template>
</cpn>
</div>
v-slot總結和注意事項
（1）可以使用template標籤，加v-slot:name指令可以指定具名插槽，當沒有指定插槽name時，默認出口會帶有隱含的名字“default”,爲默認
（2）根組件可以利用v-slot:name="slotProps"接收子組件中的數據，子組件中插槽只要命名並綁定數據就可以了
（3）如果被提供的內容只有一個默認插槽時，組件的標籤可以直接被當做插槽的模板來使用
（4）v-slot的縮寫是#，若想使用簡寫語法，則務必指定插值的名字或者default