vue插槽
v-slot vue指令匿名插槽/默认插槽只可以使用一次,由父组件提供样式和内容,子组件只负责显示具名插槽可以使用多次<template v-slot:插槽名称>插槽内容作用域插槽(带数据的插槽)在slot上面绑定数据<template v-slot:插槽名称=集合>{{集合.值}}<slot name=“插槽名称” :值=xxx>直接上代...
·
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
更多推荐
已为社区贡献1条内容
所有评论(0)