插槽_默认插槽

最新推荐文章于 2024-11-04 14:35:19 发布

小野晨曦

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量381

点赞数 11

文章标签：前端 vue typescript

本文链接：https://blog.csdn.net/GarbageO_O/article/details/138135366

版权

本文展示了如何在Vue中创建一个父组件，通过`<Category>`子组件动态加载热门游戏列表、图片和视频，使用了TS编写并展示了数据绑定和组件间的通信.

摘要由CSDN通过智能技术生成

效果展示：

Father.vue

<template>
  <div class="father">
    <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>
  </div>
</template>

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

  //数据
  let games = reactive([
    {id:'01',name:'王者荣耀'},
    {id:'02',name:'英雄联盟'},
    {id:'03',name:'星穹铁道'},
    {id:'04',name:'斗罗大陆'}
  ])
  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
  let videoUrl = ref('https://yiqida.oss-cn-chengdu.aliyuncs.com/video2020-07-29/202007291754445.mp4')
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
    height: 50%;
  }
 
</style>

Category.vue

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

<script setup lang="ts" name="Category">
defineProps(['title'])
</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;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>