目录

一.性质

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>

四.效果