插槽基本用法
组件
<div>
<slot name="header"></slot>
</div>
<div>
<slot></slot>
</div>
使用
<ksd-card>
<template v-slot:header>
<h3>统计用户</h3>
</template>
<template v-slot:default>
<div>我是一个内容</div>
</template>
</ksd-card>
<ksd-card>
<template slot="header">
<h3>统计用户</h3>
</template>
<template slot="default">
<div>我是一个内容</div>
</template>
</ksd-card>
<ksd-card>
<template #header>
<h3>统计用户</h3>
</template>
<template #default>
<div>我是一个内容</div>
</template>
</ksd-card>
vue2作用域插槽
组件
<span>
<slot v-bind:user="user"></slot>
</span>
使用
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
简写
组件
<span>
<slot v-bind="user"></slot>
</span>
使用
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.firstName }}
</template>
</current-user>
详细用法
组件
<template>
<div>
<slot v-bind:cuser="user"></slot>
</div>
</template>
<script>
data(){
return {
user:{id:1,usrename:"飞哥"}
}
},
</script>
使用
<ksd-box>
<template v-slot:default="slotProps">
{{slotProps.cuser.id}}
</template>
</ksd-box>
多个插槽的情况
组件
<div>
<slot v-bind:cname="username"></slot>
<slot name="header" v-bind="user"></slot>
</div>
<script>
data(){
return {
user:{id:1,usrename:"飞哥"},
username:"张三"
}
},
</script>
使用
<ksd-box>
<template v-slot:default="slotProps">
{{slotProps.cname}}
</template>
<template v-slot:header="slotProps">
{{slotProps}}
</template>
</ksd-box>
