您现在的位置是：首页 >技术杂谈 >VUE之插槽网站首页技术杂谈

1、默认插槽

<template>
    <div class="father"></div>
    <h3>父组件</h3>
    <div class="content">
    <Category title="热门游戏列表">
       <ul>
        <li v-for="g in games" :key="g.id">{
  
  { g.name }}</li>
       </ul>
    </Category>
    <Category title="今日美食城市">
        <img :src="imgUrl" alt="">
    </Category>
    <Category title="今日影视推荐">
        <video :src="videoUrl" controls></video>
    </Category>
    </div>
</template>

<script lang="ts" name="Father">
  import Category from './Category.vue'
  import {ref,reactive} from "vue"

  let games = reactive([
    {id:1,name:'英雄联盟'},
    {id:2,name:'绝地求生'},
    {id:3,name:'和平精英'},
    {id:4,name:'王者荣耀'}
  ])
  let imgUrl = 'https://img2.baidu.com/it/u=3237968337,425972872&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
  let videoUrl = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
  
</script>

<style scoped>
.category {
   background-color: skyblue;
   border-radius: 10px;
   box-shadow: 0 0 10px;
   padding: 10px;
   width: 200px;
   height:300px;
}

.content{
   display: flex;
   text-align: center;
   font-size: 18px;
   font-weight: 800;
}

img,video{
    width: 100%;
}
</style>

<template>
    <div class="category"></div>
    <h2>{
  
  {  title }}</h2>
    <slot>默认内容</slot>
</template>

<script lang="ts" name="Category">

</script>


<style scoped>
.category {
   background-color: skyblue;
   border-radius: 10px;
   box-shadow: 0 0 10px;
   padding: 10px;
   width: 200px;
   height:300px;
}

.h2 {
    background-color: orange;
}
</style>

2、具名插槽

<Category title="热门游戏列表" >
        <template v-slot:s2>
            <ul>
            <li v-for="g in games" :key="g.id">{
  
  { g.name }}</li>
        </ul>
        </template>
        <!-- <template  v-slot:s1> -->
        <template  #:s1>
            <h2>热门游戏列表</h2>
        </template>
    </Category>

<template>
    <div class="category"></div>
    <h2>{
  
  {  title }}</h2>
    <!-- 具名插槽 -->
    <slot name="s1">默认内容1</slot>
    <slot name="s2">默认内容2</slot>
</template>

3、作用域插槽

<template>
    <div class="father"></div>
    <h3>父组件</h3>
    <div class="content">
      <Game> 
        <template v-slot="params">
            <ul>
              <li v-for="g in params.youxi" :key="g.id">{
  
  { g.name }}</li>
            </ul>
        </template>
      </Game>
      <Game>
        <template v-slot="params">
            <ol>
              <li v-for="g in params.youxi" :key="g.id">{
  
  { g.name }}</li>
            </ol>
        </template>
      </Game>
      <Game> 
        <template v-slot="{youxi}">
            <h3 v-for="g in youxi" :key="g.id">{
  
  { g.name }}</h3>
        </template>
      </Game>
    </div>
</template>
<template>
    <div class="game">
      <h2>游戏列表</h2>
      <slot :youxi="games" x="哈哈" y="你好"></slot>
    </div>
</template>

<script setup lang="ts" name="Game">
 import {reactive} from 'vue'
 let games = reactive([
    {id:'agshshgshhhs01',name:'英雄联盟'},
    {id:'agshshgshhhs02',name:'绝地求生'},
    {id:'agshshgshhhs03',name:'和平精英'},
    {id:'agshshgshhhs04',name:'王者荣耀'}
 ])
</script>

<style scoped>
.game {
    width: 200px;
    height: 300px;
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>