學習要點：
1.具名插槽
2.作用域問題
本節課我們來開始學習 Vue3.x 的組件插槽的名稱設置和作用域問題。
一．具名插槽
1. 具名插槽也就是給插槽起一個名字，然后調用對應的內容，而其它則被忽略；
<div id="app">
<html-a>****html-a>
<html-a v-slot:header>headerhtml-a>
div>
// 模板
template : `
`
PS：具名插槽的好處不言而喻了，可以有效控制各種復雜的布局和內容展示；
PS：v-slot 也支持縮寫方案，用#號代替即可；
<html-a #header>headerhtml-a>
二．作用域問題
1. 用于作用域的問題，插槽內的值是無法獲取到子組件 data 屬性的內容的；
<html-a>{{message}}html-a>
PS：這里的{{message}}到底是子組件的 message 還是父組件的 message？
2. 為了解決這個問題，插槽提供了 v-slot:default 方案來處理，具體如下：
<html-a v-slot:default="slotProps">
{{slotProps.message}}
html-a>
template : `
v-bind:message="message">
PS：這里命名會有誤導性，這里的 slotProps 是可以自定義的，下面左邊的 message 自定義；
PS：如果改為 v-bind:abc，那么調用就是：slotProps.abc 即可；
3. 下面是作用域插槽的一些簡寫，具體如下：
<html-a v-slot="slotProps">
{{slotProps.message}}
html-a>
4. 使用 ES6+的解構語法，更加方便，具體如下：
<html-a v-slot="{message}">
{{message}}
html-a>
//或
<html-a v-slot="{message : info}">
{{info}}
html-a>
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
