重学vue之slot用法（包含作用域插槽）
程序员文章站
2022-06-17 15:22:08
说明插槽好比子组件留好位置，父组件写好一个dom结构，包括样式这些，然后把这个dom扔到子组件预留的空位中。（这只是形象记忆哈。。。。。。）老版本的用法入口常规用法注意这里的写法，老板本中是用一个等号父组件中
说明
插槽好比子组件留好位置，父组件写好一个dom结构，包括样式这些，然后把这个dom扔到子组件预留的空位中。（这只是形象记忆哈。。。。。。）
- 老版本的用法入口
常规用法
- 注意这里的写法，老板本中是用一个等号
父组件中
<template>
<div>
<child/>
<!-- 指定这个结构传到名字叫slot1的插槽 -->
<template v-slot:slot1>
<div>我是父组件传递过来的1</div>
</template>
<!-- 指定这个结构传到名字叫slot2的插槽 -->
<template v-slot:slot2>
<div>我是父组件传递过来的2</div>
</template>
</child>
</div>
</template>
子组件中
<template>
<div>
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</div>
</template>
作用域插槽
- 注意这里的写法，老板本中是用slot-scope="props"获取
父组件中
<template>
<child v-slot="{childDate}">
<div>{{childDate}}</div>
</child>
</template>
子组件中
<div>
<slot v-for="childDate in 10" :item="childDate" />
</div>
本文地址：https://blog.csdn.net/qq_45549336/article/details/111000323