一、概念解析
插槽slot：插槽有點(diǎn)像組件中的一個(gè)占位符咧党，當(dāng)別的組件使用這個(gè)組件的時(shí)候溜徙，在這一對(duì)標(biāo)簽中又寫了其他內(nèi)容，就通過(guò)插槽渲染進(jìn)這個(gè)組件
具名slot：用屬性name標(biāo)識(shí)的插槽糠排，可以根據(jù)不同的名字匹配分發(fā)內(nèi)容
作用域slot：用于接收子組件傳遞過(guò)來(lái)的數(shù)據(jù)舵稠。通常父組件在分發(fā)內(nèi)容時(shí)，引用的是自己組件的數(shù)據(jù)入宦。如果想要使用子組件的數(shù)據(jù)哺徊，就通過(guò)作用域插槽。
二乾闰、例子
1. 單個(gè)插槽
step1. 子組件內(nèi)部定義slot標(biāo)簽占位
step2. 父組件使用子組件時(shí)分發(fā)內(nèi)容落追，渲染到slot
<div class="myComponent"> //假定組件my-component有如下模板
<slot></slot>
</div>
//在父組件中的使用方法
<my-component>
<p>我就是slot的替代內(nèi)容，這里可以放任何標(biāo)簽元素涯肩，即使是一長(zhǎng)串ul>li列表</p>
</my-component>
2. 具名插槽
step1. 子組件內(nèi)部定義slot標(biāo)簽占位轿钠，并且給不同的slot雹熬，命名
step2. 父組件使用子組件時(shí)分發(fā)內(nèi)容，在分發(fā)內(nèi)容處指明要渲染的slot的名字
//假定組件my-component有如下模板
<div class="myComponent">
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
//在父組件的模板中使用方法
<my-component>
<p slot="header">我就是這個(gè)叫header的slot替代內(nèi)容谣膳，這里可以放任何標(biāo)簽竿报，只要標(biāo)簽加了slot="header"就會(huì)渲染</p>
<span slot="footer">我就是這個(gè)叫footer的slot替代內(nèi)容</span>
</my-component>
3. 作用域插槽
step1. 子組件內(nèi)部定義slot標(biāo)簽占位，在slot標(biāo)簽里自定義屬性傳值
step2. 父組件分發(fā)內(nèi)容時(shí)定義slot-scope屬性继谚，它的值是臨時(shí)變量烈菌，通過(guò)這個(gè)臨時(shí)變量引用子組件slot的傳值屬性
//假設(shè)子組件的模板有如下內(nèi)容
<div class="child">
<slot text = "hello world"></slot>
</div>
//父組件在模板中使用子組件的text的值
```html
<div class="parent">
<child>
<span slot-scope="props"> {{props.text}} </span> //會(huì)把hello world渲染出來(lái)
</child>
</div>
