目录
一.性质
1.数据传递性
2.自定义显示方式
3.复用性
4.解耦性
二.作用
1.提高灵活性
2.增强可维护性
3.简化数据流
4.提升用户体验
三.使用
1.父组件
2.子组件
四.代码
1.父组件代码
2.子组件代码
五.效果
作用域插槽（Scoped Slots）是Vue.js中一种强大的功能，它允许父组件向子组件传递数据，并在子组件内部使用这些数据。
一.性质
1.数据传递性
作用域插槽允许父组件将数据传递给子组件，使得子组件能够根据这些数据进行动态渲染。
2.自定义显示方式
父组件不仅传递数据，还可以定义数据的显示方式，从而在不影响子组件逻辑的情况下，控制内容的展示形式。
3.复用性
通过作用域插槽，子组件可以更加灵活地适应不同的使用场景，提高了组件的复用性。
4.解耦性
作用域插槽有助于实现父子组件之间的解耦，使得子组件不需要关心数据的来源和处理逻辑，只需关注如何展示数据。
二.作用
1.提高灵活性
作用域插槽使得子组件可以根据接收到的数据动态调整内容，增加了界面的灵活性。
2.增强可维护性
由于作用域插槽的使用，子组件变得更加通用，减少了针对特定情况编写的代码，从而提高了代码的可维护性。
3.简化数据流
通过作用域插槽，可以避免在多个层级之间传递props，简化了数据流的处理。
4.提升用户体验
作用域插槽允许开发者根据具体需求定制组件的行为，从而提供更加丰富和个性化的用户体验。
三.使用
1.父组件
1.无序排列显示学生信息。
2.有序排列显示老师信息。
3.显示视频。
2.子组件
1.插槽的作用是允许子组件向父组件传递内容。
2.创建响印式老师学生视频对象。
四.代码
1.父组件代码
<template>
<div class="grandfather">
<Father >
<template v-slot="params">
<ul>
<li v-for="student in params.student" :key="student.name">{{ student.name }}</li>
</ul>
</template>
</Father>
<Father >
<template v-slot="params">
<ol>
<li v-for="teacher in params.teacher" :key="teacher.name">{{ teacher.name }}</li>
</ol>
</template>
</Father>
<Father>
<template v-slot="params">
<ol>
<video :src="params.videoUrl" controls></video>
</ol>
</template>
</Father>
</div>
</template>
<script setup lang="ts" name="Father">
import Father from "./Father.vue";
</script>
<style scoped>
.grandfather{
background-color: skyblue;
}
h4{
margin-left: 20px;
font-size: 20px;
}
</style>
2.子组件代码
<template>
<div class="father">
<slot :student="student" :teacher="teacher" :videoUrl="videoUrl"></slot>
</div>
</template>
<script setup lang="ts" name="father">
import { reactive , ref } 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>
.father{
background-color: orange;
}
h4{
margin-left: 20px;
font-size: 20px;
}
button{
margin-left: 20xp;
width: 200px;
height: 40px;
}
</style>
五.效果
