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

【slot】

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

  1. 默认插槽

  默认插槽的name是default

  • 父组件

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

  • 子组件

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

  2. 具名插槽
  1. 在插槽上加上name,可以实现多个结构匹配
  2. 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>
  

  3. 作用域插槽

  理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（新闻数据在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>