關於Vue中插槽的理解和總結

1. 插槽作用: 我的理解大概就是子元件留了個坑坑，父元件如果有需要就可以往那個坑坑裡面放一些其他的元件和模板。
2. 插槽型別：default插槽，具名插槽，作用域插槽。

• default插槽：就是預設插槽，所有沒有名字的插槽都會被放入this.$slots.default中，包分配。
• 具名插槽：具名插槽就是有名字的插槽，元件和模板申明瞭你的名字，就把他放在你的槽槽裡。

子元件：child.vue
<templete>
<div>
<slot name="slotdemo"></slot>
</div>
</templete

父元件：
<templete>
<child>
    <h v:slot="slotdemo">SlotDemo</h>
</child>
</templete>

• 作用域插槽：作用域插槽就是父元件用子元件的插槽的時候，槽槽裡面的元件和模板可以去拿到子元件從槽槽那邊綁過來的資料

子元件：child.vue
<templete>
<div>
<slot :slotData="data"></slot>
</div>
</templete>
<script>
export default{
    data(){
        return{
            data:'哈哈哈'
        }
}
</script>

父元件：
<templete>
<child>
    <h slot-scope="data">{{data.data}}</h>
</child>
</templete>