目录

一.性质

1.内容分发

2.无名称标识

3.作用域

4.使用方式

二.使用

1.父组件

2.子组件

三.代码

1.父组件代码

2.子组件代码

四.效果

---

一.性质

1.内容分发

默认插槽允许组件的使用者定义一些内容，这些内容会被插入到组件模板中的特定位置。这有助于实现灵活的内容分发和复用。

2.无名称标识

默认插槽没有名称标识，它是基于位置进行匹配的。在组件模板中，第一个未命名的插槽就是默认插槽。

3.作用域

默认插槽中的数据不能直接访问外部组件的数据，但可以通过props属性传递数据给插槽。

4.使用方式

在组件模板中，使用<slot>标签来定义默认插槽。

二.使用

1.父组件

2.子组件

1.<slot>默认内容</slot> 是一个插槽元素，它允许父组件在其内部插入内容。如果没有提供内容，将显示 "默认内容"。

2.defineProps(['title']) 是一个函数，用于声明组件的属性。这里声明了一个名为 "title" 的属性，它可以在父组件中使用。

三.代码

1.父组件代码

<template><div class="grandfather"><Father title="学生"><ul><li v-for="s in student" :key="s.id">{{ s.name}}</li></ul></Father><Father title="老师"><ul><li v-for="t in teacher" :key="t.id">{{ t.name}}</li></ul></Father><Father title="电影"><video :src="videoUrl" controls></video></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>默认内容</slot></div>
</template><script setup lang="ts" name="father">defineProps(['title'])</script><style scoped>
.father{background-color: orange;
}</style>

四.效果