默认插槽:
// ----------------------------------------------------父组件
<template>
<div class="page">
<div class="content">
<SlotCom title="打招呼">
<span>插槽内容:你好呀</span>
</SlotCom>
</div>
</div>
</template>
<script setup lang="ts">
import SlotCom from './SlotCom.vue'
</script>
<style lang="scss" scoped>
.page {
width: 600px;
height: 800px;
border: 1px solid red;
padding: 20px;
.content {
width: 500px;
height: 600px;
background-color: antiquewhite;
overflow: scroll;
}
}
</style>
// ------------------------------------------------------子组件
<template>
<div class="slot">
<div class="title">{{ title }}</div>
<slot>
<span>默认内容:不穿东西过来我就展示这个</span>
</slot>
</div>
</template>
<script setup lang="ts">
defineProps(['title'])
</script>
<style lang="scss" scoped>
.slot {
width: 200px;
height: 200px;
border-radius: 4px;
box-shadow: 0 0 10px;
background-color: skyblue;
}
</style>
具名插槽:
// ---------------------------------------父组件
<template>
<div class="page">
<div class="content">
<!-- 写法一 -->
<SlotCom>
<template v-slot:content>
<span>插槽内容:你好呀</span>
</template>
<template v-slot:title>
<div>热门游戏</div>
</template>
</SlotCom>
<!-- 写法二 -->
<SlotCom>
<template #content>
<span>插槽内容:大漠孤鹰</span>
</template>
<template #title>
<div>经典影片</div>
</template>
</SlotCom>
</div>
</div>
</template>
<script setup lang="ts">
import SlotCom from './SlotCom.vue'
</script>
<style lang="scss" scoped>
.page {
width: 600px;
height: 800px;
border: 1px solid red;
padding: 20px;
}
</style>
// ---------------------------------------------------子组件
<template>
<div class="slot">
<slot name="title">
<span>默认title:不穿东西过来我就展示这个</span>
</slot>
<slot name="content">
<span>默认内容:不穿东西过来我就展示这个</span>
</slot>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.slot {
width: 200px;
height: 200px;
border-radius: 4px;
box-shadow: 0 0 10px;
background-color: skyblue;
}
</style>
作用域插槽:
特点:数据在子组件那边,由子组件维护,但具体生成结构是由父组件决定
// --------------------------------------------------父组件
<template>
<div class="page">
<div class="content">
<!-- 默认 -->
<SlotCom>
<template v-slot="params">
<ol>
<li v-for="(item, index) in params.youxi" :key="index">{{ item.name }}</li>
</ol>
</template>
</SlotCom>
<!-- 具名 -->
<SlotCom>
<!-- <template v-slot:name="params"> -->
<template #name="params">
<ol>
<li v-for="(item, index) in params.youxi" :key="index">{{ item.name }}</li>
</ol>
</template>
</SlotCom>
</div>
</div>
</template>
<script setup lang="ts">
import SlotCom from './SlotCom.vue'
</script>
<style lang="scss" scoped>
.page {
width: 600px;
height: 800px;
border: 1px solid red;
padding: 20px;
.content {
width: 500px;
height: 600px;
background-color: antiquewhite;
overflow: scroll;
}
}
</style>
//----------------------------------------------------------子组件
<template>
<div class="slot">
<slot :youxi="games" hh="哈哈"></slot>
<slot name="name" :youxi="games" hh="哈哈"></slot>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
let games = reactive([{ name: '王者荣耀' }, { name: '英雄联盟' }, { name: '炉石传说' }])
</script>
<style lang="scss" scoped>
.slot {
width: 200px;
height: 200px;
border-radius: 4px;
box-shadow: 0 0 10px;
background-color: skyblue;
}
</style>