vue组件插槽--具名插槽

具名插槽：

应用场景：默认插槽只能完成一个定制的位置，要么定制内容，要么定制标题。如果一个组件内有多处结构 需要外部传入标签进行定制，就要用到具名插槽

语法：

1. 多个 slot 使用 name 属性区分名字

<template>
	<button>
		<!--父级组件传过来的插槽数据-->
		<slot name="header"></slot>
		<slot name="main"></slot>
		<slot name="foot"></slot>
	</button>
</template>

<script>
	export default{

	}
</script>

2. template 配合 v-slot:名字   来分发对应标签（v-slot : 插槽名 可以简写成 #插槽名，例如 v-slot : head   →   #head）

<template>
	<ComponentE>
		<template v-slot:header>
			<p>{{ headmsg }}</p>
		</template>
		<template v-slot:main>
			<p>{{ mainmsg }}</p>
		</template>
		<template #foot>
			<p>{{ footmsg }}</p>
		</template>
	</ComponentE>
</template>

<script>

	import ComponentE from './componentE.vue'
	export default {
		data(){
			return{
				headmsg:'插槽标题',
				mainmsg:'内容',
				footmsg:'底部内容'
			}
		},
		components: {
		    // 局部注册组件
			ComponentE
		  }
	}
</script>

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/158/1084.html

很赞哦！ (0)