vue3插槽
在Vue 3中，插槽是一种让父组件能够向子组件传递内容的机制。插槽可以分为默认插槽、具名插槽和作用域插槽。
1、默认插槽：子组件在模板中预留一个插槽，父组件可以传入内容填充这个插槽。
1）子组件（Child.vue）：
<template>
<div>
<slot>默认内容</slot>
</div>
</template>
2）父组件：
<template>
<Child>
<p>这是父组件传递的内容。</p>
</Child>
</template>
2、具名插槽：子组件可以定义多个插槽，父组件传递内容时需要指定插槽的名字。
1）子组件：
<template>
<div>
<slot name="header"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>
</div>
</template>
2）父组件：
<template>
<Child>
<template v-slot:header>
<h1>页头内容</h1>
</template>
<template v-slot:main>
<p>主体内容</p>
</template>
<template v-slot:footer>
<footer>页脚内容</footer>
</template>
</Child>
</template>
3、作用域插槽：除了传递内容，插槽还可以提供数据给父组件使用。
1）子组件：
<template>
<div>
<slot :user="user">{{ user.name }}</slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: '张三', age: 30 }
};
}
};
</script>
2）父组件：
<template>
<Child>
<template v-slot:default="slotProps">
<p>用户名: {{ slotProps.user.name }}</p>
<p>用户年龄: {{ slotProps.user.age }}</p>
</template>
</Child>
</template>
4、总结
在Vue 3中，插槽的使用有所简化，v-slot指令被简化为 # 和 v-slot:，最新的语法形式如下：
<Child>
<template #header>
<h1>页头内容</h1>
</template>
<template #main>
<p>主体内容</p>
</template>
<template #footer>
<footer>页脚内容</footer>
</template>
</Child>
以上代码展示了如何在Vue 3中使用默认插槽、具名插槽和作用域插槽
