Vue中的slot，作用域插槽和具名插槽

1、具名插槽

有時候我們希望在指定的位置輸出我們的子元素，這時候具名插槽就排上了用場。

//組件調用時
<MyFooter v-red :age.sync="age">
　　<template v-slot:footer>
　　//這里v-slot：后邊的值與組件內的slot的name屬性對應，也就是插槽的名稱。
　　<div>list</div>
　　</template>
</MyFooter>
//書寫組件時
<template>
　　<div>{age}}
　　　　<div>
　　　　　　<slot name='footer' />
　　　　　　//這里name的值就是這個插槽的名稱。
　　　　</div>
　　</div>
</template>

最后我們會在我們想要的位置將我們的元素放置。

2、作用域插槽

作用域插槽的主要作用是在書寫插槽內容時可以獲取到插槽作用域的值。

//組件調用
 <ul>
   <myli :title="val.title">
   <template v-slot:footer="message">
       <div>{{message.aa}}</div>
   </template>
   </myli>
 </ul>
 //書寫組件時
 <template>
    <li>
        <slot name='footer' :aa="title">
        </slot>
    </li>
</template>

注意事項：
這里需要注意的是message是所有你綁定屬性的集合，也就是你寫的：aa=“title”會當做message的屬性來實現。當然這里message可以換做其它的名稱。

3、總結
v-slot的出現是為了代替原有的slot和slot-scope
簡化了一些復雜的語法。
一句話概括就是v-slot ：后邊是插槽名稱，=后邊是組件內部綁定作用域值的映射。