vue中的三种插槽

62 阅读1分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

默认插槽

子组件
<div>
	<slot></slot>
</div>
父组件
<template>
	<div>
		<slotvue>
			123
		</slotvue>
	</div>
</template>
<script>
import slotvue from '@/components/slot.vue'
export default{
	components:{
		slotvue: slotvue
	}
}
</script>

具名插槽

子组件
<div>
	<slot name="abc"></slot>
</div>
父组件
<template>
	<div>
		<slotvue>
			<template #abc>
				<div>123</div>
			</template>
		</slotvue>
	</div>
</template>
<script>
import slotvue from '@/components/slot.vue'
export default{
	components:{
		slotvue: slotvue
	}
}
</script>

作用域插槽 (插槽中定义的数据父组件中不能直接使用,需要使用自定义属性传过去,v-slot:default的default是插槽的名字,fff是个对象 fff.data的data是自定义属性的名字)

子组件
<div>
	<slot :data='a'></slot>
</div>
<script>
	export default{
		data(){
			return {
				a:123
			}
		}
	}
</script>
父组件
<template>
	<div>
		<slotvue>
			<template v-slot:default="fff">
				<div>{{fff.data}}</div>
			</template>
		</slotvue>
	</div>
</template>
<script>
import slotvue from '@/components/slot.vue'
export default{
	components:{
		slotvue: slotvue
	}
}
</script>