VueJS中的slot插槽

VueJS中的slot插槽语法是定义组件不可获取且非常重要的语法，本篇文章将介绍一下VueJS中slot的学习笔记。

在Vue2.6.0的版本中，Vue团队为具名插槽和作用域插槽引入了一个新的统一语法（v-slot）指令。它取代了slot和slot-scope，但是旧的语法没有被移除

插槽内容

Vue实现了一套内容分发API，这套API的设计灵感源自Web Components规范草案，将元素作为承载分发内容的出口。

// slot-comp 为自定义组件
// 定义
<template>
  <div>
    <slot></slot>
  </div>
</template>
// 使用
<slot-comp>
      slot content
</slot-comp>
<slot-comp>
      <h1>slot content</h1>
</slot-comp>

当组件渲染的时候，将会被替换成slot content。插槽里面可以包含任何代码（包括HTML），如果没有包含元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
运行结果：

编译作用域

当你想在一个插槽中使用数据时，例如：

<slot-comp>
      slot content
      {{ slotProps.msg }}
</slot-comp>

该插槽跟模板的其他地方一样可以访问相同的实例属性，而不能访问的作用域。例如：

<slot-comp msg="msg">
      slot content
      {{ msg }} //undefined
</slot-comp>

注意：父级模板里的所有内容都是在父级作用域中编译的，字模板里的所有内容都是在子作用域中编译的

后背内容

有时为一个插槽设置具体的后备内容（也就是默认的内容）是很有用的，他只会在没有提示内容的时候被渲染。

// 定义
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>
//使用
<slot-comp>
</slot-comp>
<slot-comp>
	自己定义的内容
</slot-comp>

运行结果：

具名插槽

有时我们需要多个插槽，此时就需要使用具名插槽来实现。元素有一个特殊的attribute：name。这个属性可以用来定义额外的插槽。

    <slot-comp name="icon">
    	//  
default
 与下面相等
    	// 一个不带 name 的  出口会带有隐含的名字“default”。
      <p name="default">default</p>
      <p name="icon">icon</p>
    </slot-comp>

在向具名插槽提供内容的时候，我们可以在一个template元素上使用v-slot指令，并以v-slot的参数的形式提供其名称：

// 定义
<template>
  <div>
    <slot name="icon"></slot>
  </div>
</template>
// 使用
     <slot-comp>
      <template v-slot:icon>
        <p>icon</p>
      </template>
    </slot-comp>

运行结果：

现在template元素中的所有内容都将被传入相应的插槽。任何没有被包裹在带有v-slot的template中的内容都会被视为默认插槽的内容。
注意：v-slot只能添加在