vue3学习笔记（13）插槽slot

最新推荐文章于 2024-05-04 23:08:41 发布

天天天天天天天天d

最新推荐文章于 2024-05-04 23:08:41 发布

阅读量140

点赞数

分类专栏： vue3 文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/gtd54789/article/details/125108019

版权

vue3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue3专栏入口

文章目录

1.实现需求

一个组件，实现以下三个不同的需求这时就需要在组件总用到插槽标签slot
在这里插入图片描述

2.目录结构

在这里插入图片描述

3.完整代码

Category.vue完整代码:

<template>
    <div class="category">
        <h3>{{title}}</h3>
        <slot></slot>
    </div>
</template>

<script>

import { defineComponent } from 'vue'

export default defineComponent({
    name:'Category',
    props:['title'],
    setup(props,context){

    }
})
</script>

<style scoped>
.category{
    width: 200px;
    height: 300px;
    background-color: aquamarine;
}
h3{
    text-align: center;
    background-color: rgb(155, 190, 16);
}
</style>

app.vue完整代码:

<template>
	<div class="category_div">
		<Category title="动漫">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1003%2F7abe7513g00r0ekle0075d2009o00amg009o00am.gif&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656771898&t=fdacac50f4c0988b3822f333207eb492" alt="天天">
		</Category>

		<Category title="游戏">
			<ul>
				<li v-for="(g,index) in gameList" :key="index">{{g}}</li>
			</ul>
		</Category >

		<Category title="电影">
			<h1>没有视频就用文字代替吧</h1>
		</Category>
	</div>

</template>

<script lang="ts">

import { defineComponent } from 'vue'
import Category from './components/Category.vue'
export default defineComponent({
	name: 'App',
	components: { Category },
	setup(props, context) {
		const gameList = ["红警","LOL","CF","DNF"]
		return{
			gameList
		}
	}
})
</script>

<style scoped>
.category_div {
	background-color: beige;
	width: 800px;
	display: flex;
	justify-content: space-around;
}
img{
	width: 100%;
}
</style>