vue的插槽

为什么用插槽

这里是官方的解释：https://cn.vuejs.org/guide/components/slots.html#slot-content-and-outlet

下面是我个人的理解，可能会有所纰漏。
插槽的本质就是父组件可以给子组件特定位置插入一段模板片段，有些子组件是通用组件，很多地方都在调用，然后需要定制一些特定内容的话，就可以使用插槽。
当然你也可以写一个通用组件，再写一个解决这种特殊内容的通用组件，但是如果需要定制的特殊内容很多呢，而且只在某一段展示方式有很大区别，那么可能又需要写一个定制这种内容的通用组件，这么一顿下来，你就发现你的通用组件好像不是那么通用了，这些通用组件和这些特殊的通用组件就太多了，这样搞起来太麻烦了，那么使用插槽就可以省很多代码了。

使用

插槽
父组件

<你的组件名>插入的内容<你的组件名/><!-- 这个插入的内容可以是任意的html元素 -->

子组件

<div>
	<span></span>
	<slot></slot><!-- 父组件的内容会插入到这个slot标签的位置 -->
	<p></p>
</div>

具名插槽
当然你如果想在子组件里面接收多个插槽，就可以使用具名插槽，通俗意义上就是你肯定要区别开那些不同的插槽，给不同的插槽以name属性来加以区分
父组件

<你的组件名>
  <template v-slot:你给那个插槽取的名字>  <!-- 这里就必须是template了，不能用div什么的 -->
    <!-- 具体的插槽的内容放这里 -->
  </template>
   <template #你给那个插槽取的名字>  <!-- 也可以这样写，两种写法 -->
    <!-- 具体的插槽的内容放这里 -->
  </template>
<你的组件名/>

子组件

<div>
	<span></span>
	<slot name="你给那个插槽取的名字1"></slot><!-- 父组件的内容会插入到这个slot标签的位置 -->
	<p></p>
</div>

这里的插槽名也可以是动态的，需要用到动态参数。