插槽 --- vue插槽的使用，简单易懂！！！

一、vue常用插槽（默认插槽）

直接上代码，通俗易懂。

子组件里面直接放一个slot

// 这是子组件son内部
<template>
	<div>
		<slot></slot>
	</div>
</template>

父组件引入子组件标签中直接写插入的内容

// 这是在父组件中，引入子组件的标签里插入的内容
<template>
	<son>
		<p>这是一个默认插槽</p>
	</son>
</template>

二、vue常用插槽（具名插槽）

顾名思义，为插槽取个名字，眼儿对眼儿，嘴巴对嘴巴，多个插槽一起使用。

子组件里面放slot，并且取名字，上代码

// 这是子组件son内部
<template>
	<div>
		<slot name="mouse"></slot>
		<slot name="eye"></slot>
	</div>
</template>

父组件引入子组件v-slot对应的名字然后写插入的内容

// 这是在父组件中，引入子组件的标签里插入的内容
<template>
	<son>
		<template v-slot:mouse>
        	<div>这是一个具名插槽mouse-slot</div>
      	</template>
        <template v-slot:eye>
            <div>这是一个具名插槽eye-slot</div>
        </template>
	</son>
</template>