vue插槽

v-slot 为vue插槽指令
1.匿名插槽/默认插槽
只可以使用一次，由父组件提供样式和内容，子组件只负责显示
2.具名插槽
可以使用多次

<template v-slot:插槽名称><div>插槽内容</div></template>
<slot name="插槽名称"></slot>

3.作用域插槽（带数据的插槽）
在slot上面绑定数据

<template v-slot:插槽名称=集合><div>{{集合.值}}</div></template>
<slot name="插槽名称" :值=xxx></slot>

直接上代码

// 父组件
<Aside>
    <template v-slot:mySlot="item" >我是插槽<div>{{item.data}}</div></template>
</Aside>

//子组件
<template>
    <div class="left">
        我是Aside
        <slot name="mySlot" :data="msg"></slot>
    </div>
</template>

其中 v-slot:mySlot=“item” 的------”=“右边是子组件绑定属性的集合，以对象的形式保存

注意：当控制台报出以下错误，说明代码位置没放对，一定要把v-slot放在父组件相应位置

<template v-slot> can only appear at the root level inside the receiving the component