vue插槽

一、默认插槽

<template>
  <div class='father'>
    <h3>父组件</h3>
    <div class="content">
      <Category title='热门游戏列表'>
        <ul>
          <li v-for='item in games' :key='item.id'>{{item.name}}</li>
        </ul>
      </Category>
      <Category title='今日美食城市'>
        <img :src="imgUrl" alt="">
      </Category>
      <Category title='今日影视推荐'>
        <video :src="videoUrl" controls></video>
      </Category>
    </div>
  </div>
</template>
<script setup>
import  Category from './Category.vue'
import {ref,reactive} from 'vue'
let games=reactive([
  {
    id:'afdddwet1',
    name:'4399小游戏'
  },
  {
    id:'afdddwet2',
    name:'网页小游戏'
  },
  {
    id:'afdddwet3',
    name:'手机小游戏'
  },
  {
    id:'afdddwet4',
    name:'小游戏'
  }
])
let imgUrl=ref('https://p0.ssl.qhimgs1.com/sdr/400__/t0473991f73e7e7f1be.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped lang='scss'>
.father{
  width: 100%;
  height: 100%;
  padding:20px;
  .content{
    display: flex;
    justify-content: space-evenly;
  }
  img,video{
    width: 100%;
  }
}
</style>

<template>
  <div class="category">
    <h4>{{title}}</h4>
    <slot></slot>
  </div>
</template>
<script setup>
defineProps(['title'])
</script>
<style scoped lang='scss'>
.category{
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
  width: 200px;
  height: 300px;
  h4{
    background-color: orange;
    text-align: center;
    font-size: 20px;
  }
}
</style>

二、具名插槽

<template>
  <div class='father'>
    <h3>父组件</h3>
    <div class="content">
      <Category>
        <template v-slot:s1>
          <h4>热门游戏列表</h4>
        </template>
        <template v-slot:s2>
          <ul>
            <li v-for='item in games' :key='item.id'>{{item.name}}</li>
          </ul>
        </template>
      </Category>
      <Category>
        <template v-slot:s1>
          <h4>今日美食城市</h4>
        </template>
        <template v-slot:s2>
          <img :src="imgUrl" alt="">
        </template>
      </Category>
      <Category>
        <template #s1>
          <h4>今日影视推荐</h4>
        </template>
        <template #s2>
          <video :src="videoUrl" controls></video>
        </template>
      </Category>
    </div>
  </div>
</template>
<script setup>
import  Category from './Category.vue'
import {ref,reactive} from 'vue'
let games=reactive([
  {
    id:'afdddwet1',
    name:'4399小游戏'
  },
  {
    id:'afdddwet2',
    name:'网页小游戏'
  },
  {
    id:'afdddwet3',
    name:'手机小游戏'
  },
  {
    id:'afdddwet4',
    name:'小游戏'
  }
])
let imgUrl=ref('https://p0.ssl.qhimgs1.com/sdr/400__/t0473991f73e7e7f1be.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped lang='scss'>
.father{
  width: 100%;
  height: 100%;
  padding:20px;
  .content{
    display: flex;
    justify-content: space-evenly;
  }
  img,video{
    width: 100%;
  }
  h4{
    background-color: orange;
    text-align: center;
    font-size: 20px;
  }
}
</style>

<template>
  <div class="category">
    <slot name='s1'></slot>
    <slot name='s2'></slot>
  </div>
</template>
<script setup>
</script>
<style scoped lang='scss'>
.category{
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
  width: 200px;
  height: 300px;
}
</style>

三、作用域插槽

数据由子组件维护，页面结构由父组件维护

<template>
  <div class='father'>
    <h3>父组件</h3>
    <div class="content">
      <Games>
        <template v-slot='params'>
          <ul>
            <li v-for='item in params.youxi' :key='item.id'>{{item.name}}</li>
          </ul>
        </template>
      </Games>
      <Games>
        <template v-slot:default='params'>
          <ol>
            <li v-for='item in params.youxi' :key='item.id'>{{item.name}}</li>
          </ol>
        </template>
      </Games>
      <Games>
        <template #default='{youxi}'>
            <h3 v-for='item in youxi' :key='item.id'>{{item.name}}</h3>
        </template>
      </Games>
    </div>
  </div>
</template>
<script setup>
import  Games from './Games.vue'
</script>
<style scoped lang='scss'>
.father{
  width: 100%;
  height: 100%;
  padding:20px;
  .content{
    display: flex;
    justify-content: space-evenly;
  }
  img,video{
    width: 100%;
  }
  ul,ol{
    padding:10px;
  }
}
</style>

<template>
  <div class="games">
    <h4>热门游戏列表</h4>
    <slot :youxi='games'></slot>
  </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
let games=reactive([
  {
    id:'afdddwet1',
    name:'4399小游戏'
  },
  {
    id:'afdddwet2',
    name:'网页小游戏'
  },
  {
    id:'afdddwet3',
    name:'手机小游戏'
  },
  {
    id:'afdddwet4',
    name:'小游戏'
  }
])
</script>
<style scoped lang='scss'>
.games{
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
  width: 200px;
  height: 300px;
  h4{
    background-color: orange;
    text-align: center;
    font-size: 20px;
  }
}
</style>

原文地址：https://blog.csdn.net/2301_79568779/article/details/142765882

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！