Vue slot插槽
2021-04-20 本文已影响0人
乌特西西
// 父元素
<template v-slot:default>
<div>修改默认slot</div>
</template>
//name 为 default时 也可以忽略不写
// 父元素
<template>
<div>修改默认slot</div>
</template>
//or
<div>修改默认slot</div>
// 子元素
<slot name="default">默认slot</slot>
//or
<slot>默认slot</slot>
// --------------------------------------
// v-slot:testSlotName 可简写成 #testSlotName
// 父元素
<template v-slot:testSlotName>
<div>修改默认slot</div>
</template>
//or
<template #testSlotName>
<div>修改默认slot</div>
</template>
// 子元素
<slot name="testSlotName">默认slot</slot>
// --------------------------------------
// 父级只负责父级的编译 子级只负责子级的编译
// 父级想修改子级的slot默认值,可以使用 v-bind:<参数名>="" 简写成 :<参数名>=""
// 父元素
<template #user="{user}">
<div>{{user}}</div>
</template>
// 子元素
<slot name="user" :user="user">默认slot</slot>