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>




上一篇 下一篇

猜你喜欢

热点阅读