目录

一.性质与作用

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>

四.效果