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
Logo

前往低代码交流专区

更多推荐