阅读 9

VUE插槽

匿名插槽

//component1
<div>
    <slot></slot>
</div>

//parent
<component1> hello </component>
复制代码

具名插槽

将内容分发到指定位置

//component2
<div>
    <slot></slot>
    <slot namr="content"></slot>
</div>

//parent
<component2>
    //默认插槽用default做参数
    <template v-slot:default>
    匿名插槽
    </template>
    //具名插槽用插槽名做参数
    <template v-slot:content>
    具名插槽
    </template>
    </template>
</component2>
复制代码

作用域插槽

分发内容要用到子组件中的数据

//component3
<div>
    <slot :foo="foo"></slot>
</div>

//parent
<component3>
    //slotProps 这个名字可以随便取
    <template v-slot:default="slotProps">
    来自子组件的数据: {{ slotProps.foo}}
    </template>
</component3>
复制代码