vue插槽

Vue中有插槽的概念，可以是一个标签<slot></slot>，也可以是普通标签上的一个属性slot;

• name - string：用于命名插槽。
• slot - string：用于标记往哪个具名插槽中插入子组件内容；
• slot-scope：用于将元素或组件表示为作用域插槽。
• scope：用于表示一个作为带作用域的插槽的 <template> 元素

类似于我们代码中的重载，通过子类代码覆盖父类代码实现相关功能；

也可以理解为占位符，组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填充；

我们在封装一些组件时非常有用，通过插槽保留一个口子，共别人进行扩展；

下面我们进行代码演示

首先我们声明一个Button.vue组件

<template>
  <button>
    <slot name="text"></slot>
  </button>
</template>

然后我们使用可以通过两种方式

1、使用slot标注标签（2.6.11已废弃）

 <Button>
    <div slot="text">按钮</div>
 </Button>

2、使用v-slot标注

 <Button>
   <template v-slot:text>按钮</template>
</Button>

最后效果