Vue学习计划-Vue3--核心语法（九）slot插槽

【`slot`】

插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现

默认插槽

默认插槽的name是default

父组件

  <template>
    <div>
      <Child>
        <h3>默认插槽</h3>
      </Child>
    </div>
  </template>

子组件

<template>
  <div>
    <!-- 默认插槽 -->
    <!-- <slot name="default"></slot> -->
    <slot></slot>
  </div>
</template>

具名插槽

在插槽上加上name,可以实现多个结构匹配
v-slot必须要加在组件标签或者template标签上

父组件

  <template>
    <div>
      <Child>
        <!-- 可以简写成 <template #c1> -->
        <template v-slot: c1>
          <h3>插槽c1</h3>
        </template>
        <template v-slot: c2>
          <h3>插槽c1</h3>
        </template>
      </Child>
    </div>
  </template>

子组件

<template>
  <div>
    <!-- 具名插槽 -->
    <slot name="c1"></slot>
    <slot name="c2"></slot>
  </div>
</template>

作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）

具体编码：

父组件：

  <template>
    <div class="father">
      <h3>父组件</h3>
      <div class="content">
        <!-- <Hobbies v-slot="params"> -->
        <Hobbies #default="params">
            <ul>
              <li v-for="y in params.hobbies" :key="y.id">
                {{ y.name }}
              </li>
            </ul>
        </Hobbies>
        <Hobbies>
          <!-- 加在标签上会报错， Game组件上是允许的 -->
          <!-- <h3 #footer>sasdas</h3> -->
          <Game #footer></Game>
        </Hobbies>

      </div>
    </div>
  </template>

  <script setup lang="ts" name="Father">
  import Game from './Game.vue';
  import Hobbies from './Hobbies.vue'
  </script>

子组件：<Hobbies>

<template>
  <div class="game">
    <h2>爱好</h2>
    <slot :youxi="hobbies" haha="哈哈" hehe="呵呵"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
  import {reactive} from 'vue'
  let hobbies = reactive([
    {id:'01',name:'读书'},
    {id:'02',name:'唱歌'},
    {id:'03',name:'跳舞'},
  ])
</script>