vue3插槽变化

1.默认插槽还是跟以前一样

 

2.使用具名插槽时，子组件不变

以前的父组件掉用的时候

    <template slot="example">
    </template>

现在为

    <template v-slot:example>
    </template>
    或者
    <template #example>
    </template>

 

 3.作用域插槽

①父组件写法 v-slot=“{子组件插槽定义的值}”,多个值写法v-slot=“{ data,index }”,同时这里也可以简写
#default=“{ data,index }” 这样就可以了

<template>
    <div class="home_main">
        <Dialog>
            <template #header>
                <div>
                    我是头部的内容
                </div>
            </template>

            <template v-slot="{ data,index }">
                <div>
                    {{ data.name }}--{{ data.age }}--{{index}}
                </div>
            </template>
            <template #footer>
                <div>
                    我是底部内容
                </div>
            </template>
        </Dialog>
    </div>
</template>

<script lang="ts" setup>
import Dialog from "../../components/slotDialog/index.vue"

</script>

<style lang="scss">
.home_main {
    width: 100%;
    height: 100vh;
    background: green;
    font-size: 30px;
}
</style>

②子组件写法可以传多个值

<template>
    <div class="dialog_main">
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main class="main">
            <div v-for="(item, index) in dataList" :key="index">
                <slot :data="item" :index="index"></slot>    
            </div>

        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script lang='ts' setup>
import { reactive } from "vue";
type names = {
    name: string,
    age: number
}
const dataList = reactive<names[]>([{
    name: '小林',
    age: 26
},
{
    name: '小王',
    age: 27
}, {
    name: '小李',
    age: 28
}, {
    name: '小石',
    age: 29
}, {
    name: '小林',
    age: 26
}])
</script>

<style scoped lang="scss">
.dialog_main {
    .header {
        height: 20vh;
        background: red;
        width: 100%;
    }

    .main {
        height: 50vh;
        width: 100%;
        background: yellow;
    }

    .footer {
        height: 30vh;
        width: 100%;
        background: blue;
    }
}
</style>

 

若多个作用域插槽，则是具名+作用域

<template>
  <div>
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 作用域插槽 1 -->
    <slot name="header" :headerData="headerData"></slot>

    <!-- 作用域插槽 2 -->
    <slot name="footer" :footerData="footerData"></slot>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const headerData = ref('这是头部数据');
const footerData = ref('这是底部数据');
</script>

<template>
  <ChildComponent>
    <!-- 默认插槽 -->
    <template v-slot:default>
      <p>这是默认插槽内容</p>
    </template>

    <!-- 作用域插槽 1 -->
    <template v-slot:header="{ headerData }">
      <h1>{{ headerData }}</h1>
    </template>

    <!-- 作用域插槽 2 -->
    <template v-slot:footer="{ footerData }">
      <footer>{{ footerData }}</footer>
    </template>
  </ChildComponent>
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
</script>

 

动态插槽（父组件中使用，通过变量）

        <Dialog>
            <template #[name]>
                <div>
                    23
                </div>
            </template>
        </Dialog>
const name = ref('header')