vue中slots插槽的使用

• 首先在components文件夹中创建一个组建xxm-layout页面
• 在pages中创建两个页面用来展示slots插槽的作用

1.在xxm-lyaout内编写头部、主体、尾部等，在mian中使用slot插槽用于插入数据当我们在别的页面引用时写入的数据将在插槽处显示。

<template>
	<view class="layout">
		<view class="header">头部</view>
		<view class="main">
			<slot></slot>
		</view>
		<view class="footer">底部区</view>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.layout{
		.header{
			height: 100px;
			background: #cfcfcf;
		}
		.main{
			height: 200px;
		}
		.footer{
			height: 120px;
			background: orange;
		}
	}
</style>

2.在Dome1页面引用xxm-layout，并写入一些数据

<template>
	<view>
		<xxm-layout>
			<view class="row" v-for="(item,index) in 10">第{{item}}行</view>
		</xxm-layout>
	</view>
</template>

可以看到我们写入的数据在中间插槽处显示，并且头部和尾部相继显示在上下处

3.当我们有多个slot时就需要为其添加名称，否则编译器不知道因该为哪一个添加，就会出现有slot的地方都添加了数据，当我们为其添加名称后在子类中也需要通过名称为其写入数据。

<template>
	<view class="layout">
		<view class="header">
			<slot name="header"></slot>
		</view>
		<view class="main">
			<slot name="mian"></slot>
		</view>
		<view class="footer">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

在Dmoe1中使用 v-slot:header 为其指定名称写入数据，v-slot:header 还可以简写成 #header 的方式

<template>
	<view>
		<xxm-layout>
			<template v-slot:header>头部区域</template>
			<template v-slot:mian>
				<view v-for="(item,index) in 10">第{{item}}行</view>
			</template>
			<template v-slot:footer>尾部区域</template>
		</xxm-layout>
	</view>
</template>

4.在Dome2中写入的代码与Dome1相似但里面的内容不一样，当我们启动不同页面时显示的是启动页面的数据，xxm-layout只是作为一个引用的页面当不同的页面用时显示不同的数据，就是说它的框架是固定的只需要为其传入值就行了

<template>
	<view>
		<xxm-layout>
			<template #header>头部</template>
			<template #mian>
				<view class="box1"></view>
				<view class="box2"></view>
			</template>
			<template #footer>尾部</template>

		</xxm-layout>
	</view>
</template>

<script>

</script>

<style>
	.box1 {
		width: 150px;
		height: 100px;
		background: aqua;
	}

	.box2 {
		width: 150px;
		height: 100px;
		background: red;
	}
</style>