Vue插槽

插槽

用于父子组件之间的通信（一般是结构，即标签）

可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。

父组件向子组件指定位置插入html结构（默认插槽、具名插槽），或者子组件给父组件传递数据，父组件决定插入子组件对应位置的结构（作用域插槽）

默认插槽

<template>
	<div>
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name:'',
	}
</script>

<style>

</style>

<template>
	<div class="container">
		<GetUser>
			<ul>
				<li v-for="(people,index) in name" :key="index">{{people}}</li>
			</ul>
		</GetUser>
	</div>
</template>

<script>
	import GetUser from './components/GetUser'
	export default {
		name:'App',
		components:{GetUser},
		data() {
			return {
				name:['zs','ls','ww','ml'],
			}
		},
	}
</script>

<style>

</style>

具名插槽

<template>
	<div>
		<slot name="first"></slot>
		<slot name="cecond"></slot>
	</div>
</template>

<script>
	export default {
		name:'GetUser',
	}
</script>

<style>

</style>

<template>
	<div>
		<GetUser>
			<ul slot="first">
				<li v-for="(people,index) in name" :key="index">{{people}}</li>
			</ul>
			<div slot="cecond">
				<a href="#">小明</a>
			</div>
		</GetUser>
	</div>
</template>

<script>
	import GetUser from './components/GetUser'
	export default {
		name:'App',
		components:{GetUser},
		data() {
			return {
				name:['张三','李四','王五','马六'],
			}
		},
	}
</script>

<style>

</style>

作用域插槽

数据在子组件中，但是自己不能决定结构，需要将数据传递给父组件，父组件决定结构。

<template>
	<div>
		<slot :people="people"></slot>
	</div>
</template>

<script>
	export default {
		name:'GetUser',
		data() {
			return {
				people:['张三','李四','王五','马六'],
			}
		},
	}
</script>

<style>

</style>

<template>
	<div>
		<GetUser>
			<template scope="man">
				<ul>
					<li v-for="(user,index) in man.people" :key="index">{{user}}</li>
				</ul>
			</template>
		</GetUser>
	</div>
</template>

<script>
	import GetUser from './components/GetUser'
	export default {
		name:'App',
		components:{GetUser},
	}
</script>

<style>

</style>