vue插槽详解

作用：父组件向子组件传递内容，slot更像是一个出口

类型：默认插槽 具名插槽 作用域插槽

1.父组件向子组件传递内容

index.vue父组件如下：:

	<children>
		<p>我是传递的内容</p>
   </children >

children.vue:子组件接收 如下：：

	<template>
		<div>
			<h1>{{msg}}</h1>
		    <slot></slot>//这里是接收放置父组件传递的内容
		</div>
	</template>

子组件通过写入slot标签作为一个出口，接收父组件传递过来的内容

2.slot插槽可复用性

例如再children.vue页面可设置多个出口

	<template>
		<div>
			<h1>{{msg}}</h1>
		    <slot></slot>//这里是接收放置父组件传递的内容
		    <slot></slot>//这里是接收放置父组件传递的内容
		</div>
	</template>

3.组件定制化

index.vue如下：

	<template>
			<children>
				<p>我是传递的内容</p>//这里传递了内容，可在页面显示
		   </children >
		   <children/>//放置多个组件，这里没有传递内容
	</template>

4.默认插槽

当父组件传入值的时候优先展示父组件的内容，父组件传入为空时，展示子组件插槽的默认内容
children.vue如下：

<template>
	<div>
		<h1>{{msg}}</h1>
		<h3>
				<slot>我是子组件的默认内容</slot>
        </h3>
	</div>
</template>

index.vue如下：

index.vue
<template>
	<div>
		<h1>{{msg}}</h1>
		<children>我是父组件传入的内容</children >
	</div>
</template>

5.具名插槽

1.子组件slot设置唯一name<slot name='h_1'></slot>,
父组件传递内容通过template标签并且指定v-slot:h_1和子组件一致的name,即可显示再对应的插槽内
<template v-slot:h_1> <p>我是h1的内容</p> </template>
v-slot:标签可替换为#，例如<template v-slot:h_1>可替换为<template #h_1>
children.vue如下：

<template>
	<div>
		<h1>{{msg}}</h1>
		<h1><slot  name='h_1'></slot></h1>
		<h2><slot  name='h_2'></slot></h2>
		<h3><slot   name='h_3'></slot></h3>
	</div>
</template>

index.vue如下：

index.vue
<template>
	<div>
		<h1>{{msg}}</h1>
		<children>
			<template v-slot:h_1>
					<p>我是h1的内容</p>
			</template>
			<template v-slot:h_2>
					<p>我是h2的内容</p>
			</template>
			<template #h_3>
					<p>我是h3的内容</p>
			</template>
		</children >
	</div>
</template>

6.作用域插槽

6.1：从父组件拿到了子组件的内容，子组件传递内容给父组件

index.vue如下：
通过v-slot:default='strProps'接收子组件的内容

<template>
	<div>
		<h1>{{msg}}</h1>
		<children>
			<template v-slot:default='strProps'>
					{{strProps.str.job}}
			</template>
			<template v-slot:n_srt='strProps'>
					{{strProps.str.job}}
			</template>
		</children >
	</div>
</template>

children.vue如下：
通过v-bind定义一个字段名为str,后面为传递的内容strData，传给父组件 v-bind:str='strData'

<template>
	<div>
		<h1>{{msg}}</h1>
		<h1>
				<slot v-bind:str='strData'>{{strData.name}}</slot>
				<slot name='n_str' v-bind:str='strData'>{{strData.job}}</slot>
		</h1>
	</div>
</template>
<script>
	name:'index',
	data(){
		return{
			msg:'我是子组件',
			strData:{
					name:'我是子组件'，
					job:'测试作用域插槽'
			}
		}
	}
</script>

完整代码如下所示：

index.vue
<template>
	<div>
		<h1>{{msg}}</h1>
		<children></children >
	</div>
</template>
<script>
	import  children from './children.vue'
	name:'index',
	data(){
		return{
			msg:'vue插槽slot---父组件'
		}
	}
</script>

children.vue
<template>
	<div>
		<h1>{{msg}}</h1>
	</div>
</template>
<script>
	name:'index',
	data(){
		return{
			msg:'我是子组件'
		}
	}
</script>