三分钟学会vue中slot插槽的用法

插槽，简单理解就是可以即插即用的一段代码。vue中，插槽可以大致分为以下三种：

• 默认插槽
• 具名插槽
• 默认插槽

1、默认插槽

子组件内写法(child.vue)：

<template>
	<!--组件内其他代码-->
	<slot></slot> 
    	<!--组件内其他代码-->
</template>

父组件内写法(parent.vue)

<Child>
  <template>
  	<span>插槽内要显示的内容</span>
  </template>
</Child>

最后渲染出来的结果:

<!--组件内其他代码-->
<span>插槽内要显示的内容</span>
<!--组件内其他代码-->

所以，简单来说，默认插槽就是子组件内占了一个位置，在父组件内调用子组件的时候，写入什么内容，就会在这个位置显示出什么内容来。

2、具名插槽

子组件内写法(child.vue)：

<template> 
    <!--组件内其他代码-->
    <slot name="slot1"></slot>
    <slot></slot> 
    <slot name="slot2"></slot>
    <!--组件内其他代码-->
</template>

父组件内写法(parent.vue):

<Child>
  <template v-slot="slot1">
  	<span>插槽slot1内显示的内容</span>
  </template>
  <!--也可以使用 #插槽名 的形式-->
  <template #slot2>
  	<span>插槽slot2内显示的内容</span>
  </template>
  <template>
  	<span>默认插槽内要显示的内容</span>
  </template>
</Child>

最后渲染出来的结果:

<!--组件内其他代码-->
<span>插槽slot1内显示的内容</span>
<span>插槽内要显示的内容</span>
<span>默认插槽内要显示的内容</span>
<!--组件内其他代码-->

由此可见，具名插槽就是，子组件内定义插槽的时候，取了一个名字，父组件调用的时候，通过v-slot="插槽name"指令将内容分发至指定位置，从而在页面渲染出来。需要注意的是：最后渲染出来的内容，是由子组件内定义的插槽的内容位置，与父组件内调用时传入的slot顺序没有关系。

3、作用域插槽

有时候，我们在插槽内想访问子组件内的数据时，就需要用到作用域插槽。

子组件内写法(child.vue)：

<template> 
    <!--组件内其他代码-->
    <slot name="slot1" propsName="我是子组件内slot1的数据"></slot>
    <slot name="slot2" :propsName="{a:1,b:2}"></slot>
    <!--组件内其他代码-->
</template>

父组件内写法(parent.vue):

<Child>
  <template #slot1="data">
  	<span>{{data.propsName}}</span>
  </template>
  <template #slot2="data">
  	<span>{{data.propsName.a}} ---- {{data.propsName.b}}</span>
  </template>
</Child>

最后渲染出来的结果:

<!--组件内其他代码-->
<span>我是子组件内slot1的数据</span>
<span>1---2</span>
<!--组件内其他代码-->

作用域插槽，就是在子组件内以propName="data"的形式传数据，在父组件写插槽的时候用#插槽名="定义的对象名"的形式接受，插槽内用{{定义的对象名.propName}}的形式使用数据。也可以用过解构的写法：

子组件内写法(child.vue)：

<template> 
    <!--组件内其他代码-->
    <slot name="slot1" prop1="我是prop1的内容" prop2="我是prop2的内容"></slot>
    <!--组件内其他代码-->
</template>

父组件内写法(parent.vue):

<Child>
  <template #slot1="{prop1, prop2}">
  	<span>{{prop1}}-----{{prop2}}</span>
  </template>
</Child>

最后渲染出来的结果:

<span>我是prop1的内容-----我是prop2的内容</span>

总结

插槽虽然在日常封装的简单组件中比较少用到，但却是封装高级组件中必不可少的功能，插槽可以大大提高组件的可复用性。例如：一个组件，在A页面与B页面调用时，只有组局部稍有差异，或者这部分内容在每个页面显示的形态都不一样，就可采用插槽的形式封装这部分。

当然，此次分享作者也只是抛砖引玉，欢迎各位大佬分享指正。