vue2.x slot插槽使用

vue2.x slot插槽使用

1. 三种类型

• 匿名插槽
• 具名插槽
• 作用域插槽

2. 使用场景
   当遇到一个需求，子组件有上传文件的功能，在不同的父组件中，除了公共的上传功能之外，还有一些别的不同的dom样式，这个样式由父组件决定，这个时候就适合使用slot插槽；
3. 使用

// 子组件
<template>
	<div class="child">
		<h3>这里是子组件</h3>
		// 匿名插槽，一个组件只能使用一个
		<slot></slot>
		// 具名插槽，可以多个
		<slot name="header"></slot>
		// 作用域插槽
		<slot name="user" :userInfo="{name: 'slot', age: 5}"}></slot>
	</div>
</template>

// 父组件
<template>
	<h3>这里是父组件</h3>
	<Child>
		// 匿名插槽
		<p>这是匿名插槽的位置<p>
		// 具名插槽 slot为插槽定义的名字，要和子组件的name保持一致
		<p slot="header">这是具名插槽的位置</p>
		// 作用域插槽，slot-scope响应插槽的数据，名字随便
		<p slot="user" slot-scope="getInfo">
			<span>这里是作用域插槽的位置</span>
			<span>名字： {{ getInfo.userInfo.name }}</span>
			<span>年龄： {{ getInfo.userInfo.age}}</span>
		</p>
	</Child>
</template>

补充：
父组件的方法官网2.6.0版本之后已经废弃了(但仍可使用)，推荐使用v-slot

<template>
	<h3>这里是父组件</h3>
	<Child>
		// 匿名插槽
		<template>这是匿名插槽的位置<template>
		// 具名插槽 :header为插槽定义的名字，要和子组件的name保持一致
		<template v-slot:header>这是具名插槽的位置</template>
		// 作用域插槽，getInfo响应插槽的数据，名字随便
		<template v-slot:user="getInfo">
			<span>这里是作用域插槽的位置</span>
			<span>名字： {{ getInfo.userInfo.name }}</span>
			<span>年龄： {{ getInfo.userInfo.age}}</span>
		</template>
	</Child>
</template>