vue slot作用域插槽、具名插槽

vue插槽在项目中应用的还是比较广泛的， 特别是公用组件的封装， 更能体现插槽的实用性。

1，默认插槽

这个就很好理解了， 通过标签， 父组件引用子组件之后， 子组件中间内容都会默认slot所在位置

2，具名插槽

顾名思义，就是有名字的插槽， 示例如下：

**child-block.vue**
<div>
	<div>我是小林， 下面是我的个人简介：</div>
	<slot name="userInfo" ></slot>
	<slot name="friend"></slot>
</div>

**parent-block.vue**
<div>
	<child-block>
		<div slot="userInfo">我的名字是小林， 今年18岁</div>
		<div slot="friend">我有很多朋友，有小慧，小真....</div>
	</child-block>
</div>

渲染结果如下：

我是小林，下面是我的个人简介：
我的名字是小林， 今年18岁
我有很多朋友，有小慧， 小真…

当然位置随意放。

3，作用域插槽

如果父组件要用到子组件中的内容就会用到作用域插槽， 示例如下：

**child-block.vue**
<div>
	<div>我是小林， 下面是我的个人简介：</div>
	<slot name="userInfo" :info="info"></slot>
	<slot name="friend" :friend="friend"></slot>
</div>
export default {
	data () {
		info: {
			name: '小林',
			age: 18
		},
		friend: '我有很多朋友，有小慧，小真....'
	}
}

**parent-block.vue**
<div>
	<child-block>
		<template v-slot:userInfo="scope">
			<div>
					我的名字是{{ scope.info.name }}，今年{{ scope.info.age}}岁
			</div>
		</template>
		<template #friend="{ friend }">
			<div>{{ friend }}</div>
		</template>
	</child-block>
</div>

渲染结果跟具名插槽是一样的结果

我是小林，下面是我的个人简介：
我的名字是小林， 今年18岁
我有很多朋友，有小慧， 小真…

其中#friend采用了插槽的省略写法， {friend}采用了解构插槽的写法。

当然， 如果插槽没有写名字的话， 可以采用以下写法也是可以的：

// 1，省略
<template v-slot="scope">
	<div>{{ scope.friend }}</div>
</template>

// 默认写法
<template v-slot:default="scope">
	<div>{{ scope.friend }}</div>
</template>