Vue3第九章（插槽）

基本使用

Dialog/index.vue

<template>
  <div>
    <div class="header">
        <slot name="header"></slot>
    </div>
    <div class="center">
        <slot></slot>
    </div>
    <div class="footer">
        <slot name="footer"></slot>
    </div>
  </div>
</template>
<style lang='less' scoped>
.header,.center,.footer{
    height:100px;
}
.header{
    background-color: aqua;
}
.center{
    background-color: antiquewhite;
}
.footer{
    background-color: blue;
}
</style>
           

使用

<template>
  <div class="content">
    <Dialog>
      <template v-slot:header>
        <div>上面插槽</div>
      </template>
      <template v-slot>
        <div>中間的插槽</div>
      </template>
      <template v-slot:footer>
        <div>下面的插槽</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import {reactive,ref,markRaw} from 'vue'
import Dialog from '../../components/Dialog/index.vue'
</script>
           

給插槽傳遞資料

Dialog/index.vue

<template>
    <div class="center">
        <div v-for="(item,index) in data">
            <slot :index="index" :data="item"></slot>
        </div>
    </div>
</template>
<script setup lang='ts'>
import {reactive} from 'vue'
type Names = {
    name: string,
    age: number
}
const data = reactive<Names[]>([
    {
        name: '小滿',
        age: 23
    },
    {
        name: '大滿',
        age: 25 
    },
    {
        name: 'cy',
        age: 26 
    },
])
</script>
           

使用

<template>
  <div class="content">
    <Dialog>
      <template v-slot="{data,index}">
        <div>{{data.name}} -- {{data.age}} -- {{index}}</div>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import {reactive,ref,markRaw} from 'vue'
import Dialog from '../../components/Dialog/index.vue'
</script>