目录
一.性质与作用
1.基本性质
2.使用方式
3.作用
4.应用场景
5.注意事项
二.使用
1.父组件
2.子组件
三.代码
1.父组件代码
2.子组件代码
四.效果
具名插槽在Vue3中用于为组件提供一种方式，允许父组件向子组件注入内容，并且可以指定这些内容应该被插入到子组件的哪个部分。
一.性质与作用
1.基本性质
具名插槽允许开发者通过给插槽元素添加特殊的name属性来定义插槽的名称。这样，父组件就可以将内容精确地插入到指定的插槽位置。例如，一个名为"header"的插槽会专门用于接收头部的内容。
2.使用方式
在父组件中，可以通过v-slot指令或其缩写形式#来引用具名插槽，并在其中填充想要传递的内容。具名插槽的使用使得组件更加灵活，因为它允许父组件自定义子组件的某些部分，而不是完全接管子组件的渲染逻辑。
3.作用
具名插槽的主要作用是提高组件的复用性和可定制性。它使得子组件能够定义一些占位区域，由父组件决定这些区域具体显示什么内容。这种方式特别适合于需要在不同上下文中展示不同内容的情况，如导航栏、表单元素等。
4.应用场景
具名插槽适用于多种场景，尤其是在构建复杂界面时非常有用。例如，在一个通用的导航栏组件中，可以使用具名插槽来定义左侧、中间和右侧的不同内容区域，然后根据不同的页面需求插入不同的链接或按钮。
5.注意事项
在使用具名插槽时，需要注意确保每个插槽都有唯一的名称，避免与其他插槽混淆。同时，如果子组件中有多个具名插槽，父组件必须为每个插槽提供内容，否则可能会出现预期外的行为或渲染错误。
二.使用
1.父组件
v-slot在Vue3中的作用是提供一种统一的方式来处理具名插槽和作用域插槽，从而增强了组件的可复用性和灵活性。
v-slot提供了一种缩写形式，即使用井号(#)加上插槽名称。这种简写方式使得代码更加简洁易读。
2.子组件
三.代码
1.父组件代码
<template>
<div class="grandfather">
<Father >
<template v-slot:a>
<h4>
学生
</h4>
</template>
<template v-slot:b>
<ol>
<li v-for="s in student" :key="s.id">{{ s.name}}</li>
</ol>
</template>
</Father>
<Father >
<template #a>
<h4>
老师
</h4>
</template>
<template #b>
<ol>
<li v-for="t in teacher" :key="t.id">{{ t.name}}</li>
</ol>
</template>
</Father>
<Father>
<template #a>
<h4>
电影
</h4>
</template>
<template #b>
<video :src="videoUrl" controls></video>
</template>
</Father>
</div>
</template>
<script setup lang="ts" name="Father">
import Father from "./Father.vue";
import { ref,reactive } from "vue";
let student = reactive([
{id:1,name:'小明',score:80},
{id:2,name:'小红',score:100},
{id:3,name:'小蓝',score:90},
{id:4,name:'小菲',score:60}
])
let teacher = reactive([
{id:1,name:'张老师'},
{id:2,name:'李老师'},
{id:3,name:'王老师'}
])
let videoUrl = ref('http://vfx.mtime.cn/Video/2021/07/10/mp4/210710095541348171.mp4')
</script>
<style scoped>
.grandfather{
background-color: skyblue;
}
h4{
margin-left: 20px;
font-size: 20px;
}
</style>
2.子组件代码
<template>
<div class="father">
<h2>{{ title }}</h2>
<!-- 默认插槽 -->
<slot name="a">默认内容1</slot>
<slot name="b">默认内容2</slot>
</div>
</template>
<script setup lang="ts" name="father">
</script>
<style scoped>
.father{
background-color: orange;
}
h4{
margin-left: 20px;
font-size: 20px;
}
button{
margin-left: 20xp;
width: 200px;
height: 40px;
}
</style>
四.效果
