vue--插槽

最新推荐文章于 2024-09-09 17:27:34 发布

Laohei0101

最新推荐文章于 2024-09-09 17:27:34 发布

阅读量81

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/Laohei0101/article/details/118640762

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

今天就说说插槽吧，用起来还挺方便的。
一、插槽：slot、v-solt。可以更容易更灵活的创建组件。

//Layout.vue
<template>
<div>
	<div class="header">
		<slot name="header"></slot>
	</div>
	<div class="content">
		<slot name="content"></slot>
	</div>
	<div>
		<solt name="footer"></slot>
	</div>
</div>
</template>

//App.vue
<template>
	<div>
		<Layout>
			<template v-slot:header>
				<h1>头部</h1>
			</template>
			<template v-slot:content>
				<h1>主体内容</h1>
			</template>
			<template v-solt:footer>
				<h1>底部</h1>
			</template>
		</Layout>
	</div>
</template>
<script>
import Layout from "./components/Layout"
	export default{
		components:{
			Layout
		}
	}
</script>