vue插槽slot

插槽就是子组件通过<slot></slot>为父组件提供一个占位符，父组件可以在这个占位符中填充代码，html、组件等，填充内容会替换slot标签。

<child>
   <template v-slot:txt1>
      <p>插槽内容1</p>
   </template>
   <template v-slot:txt2>
      <p>插槽内容2</p>
   </template>
   <template>
      <p>插槽内容</p>
   </template>
</child>

<template>
  <div>
    <slot></slot>
    <slot name="txt1"></slot>
    <slot name="txt2"></slot>
  </div>
</template>

具名插槽可以使用缩写，v-slot可以使用#来代替，所以以上代码可以写成：<template #txt1>，但是#后面必须有name才有效。

内容会填充到对应name的slot中，没有指定name的会填充到默认插槽中，和顺序无关，但是如果指定的name是不存在的，内容不会填充进去。

v-slot can only be used on components or <template>.

作用域插槽

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<template>
  <myslot>
      <template v-slot:default="slotProps">
      {{ slotProps.user.firstName }}
      </template>
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
</script>
<style>
</style>

上面例子，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。 针对上面只给默认插槽传递模板内容的例子，在写法上可以采用默认插槽的缩写语法

<template>
  <myslot v-slot:default="slotProps">
     {{ slotProps.user.firstName }}
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
</script>
<style>
</style>

上面代码也可以直接改为

<template>
  <myslot v-slot="slotProps">
     {{ slotProps.user.firstName }}
  </myslot>
</template>