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的对象，我们可以使用结构赋值来获取对应的值。普通插槽在父组件中执行，作用域插槽在子组件中执行