Vue3：具名插槽

目录

一.性质与作用

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>

四.效果