在Vue中,插槽(slot)是一种让父组件能够向子组件插入内容的机制。
- 默认插槽:
父组件:
<template>
<ChildComponent>
<p>这是默认插槽的内容</p>
</ChildComponent>
</template>
子组件:
<template>
<div>
<slot>这是默认内容,如果没有向插槽提供内容,则会显示这里的文本</slot>
</div>
</template>
- 具名插槽:
父组件:
<template>
<ChildComponent>
<template v-slot:header>
<p>这是头部内容</p>
</template>
<template v-slot:default>
<p>这是默认插槽的内容</p>
</template>
<template v-slot:footer>
<p>这是底部内容</p>
</template>
</ChildComponent>
</template>
子组件:
<template>
<div>
<slot name="header">头部内容</slot>
<slot>默认内容</slot>
<slot name="footer">底部内容</slot>
</div>
</template>
- 作用域插槽:
子组件:
<template>
<div>
<slot :user="user">{{ user.name }}</slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: '张三', age: 30 }
}
}
}
</script>
父组件:
<template>
<ChildComponent>
<template v-slot:default="slotProps">
<p>用户名: {{ slotProps.user.name }}</p>
</template>
</ChildComponent>
</template>
以上代码展示了Vue中如何使用插槽,包括默认插槽、具名插槽和作用域插槽。在实际开发中,可以根据需要选择合适的插槽类型。