VUE小知識~作用域插槽

作用域插槽可以為我們向組件內插入特定的標簽，方便修改維護。

組件內需要使用 <slot></slot>進行插槽站位。

組件標簽內需要使用<template > </template>作為模板來存放需要放入組件內的標簽（主要還是為了好取組件內傳來的值）

例如：

在組件內（List.vue文件）：

<template>
    <div v-for="item in dates" ：key="item">
         <slot name="a" :item="item"></slot>
         <slot name="a" :item="item"></slot>
    </div>
</template>

在組件標簽內（App.vue文件內）：

<template>
    <div class="app">
        <List :dates="['小智', '小白', '小黑']">
            <template v-slot:a="{ item }">
                <span>{{ item }}</span>
            </template>
        </List>
    </div>
</template>

向組件標簽傳入一個dates的數組，接收遍歷，使用v-slot用於App.vue文件內的List組件標簽獲取slot標簽內綁定的數據，這就是作用域插槽。

具名插槽的意思就是在v-slot使用v-slot:a，在組件內<slot name="a" :item="item"></slot>。

此時v-slot:a的a對應着<slot name="a" :item="item"></slot>的a，側只會渲染名字為a的插槽。

注意：v-slot接收一個名為obj的對象，我們可以使用結構賦值來獲取對應的值。普通插槽在父組件中執行，作用域插槽在子組件中執行