vue插槽

插槽

vue为组件封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽

插槽的使用步骤

• 定义插槽

//子组件中定义插槽
<slot></slot>

• 父组件中使用插槽

<children-component>
    <div></div>
</children-component>
或者
<children-component>
    <template>
    插槽内容
    </template>
</children-component>

插槽分类

默认插槽

定义插槽时未声明插槽名称或者名称为dafault时，则为默认插槽

• 定义

<slot></slot>
或者
<slot name="default"></slot>

• 使用
  只需要在父组件中 子组件标签内直接定义插槽内容即可。换句话说，父组件中子组件标签内未标明插槽内容的均放到默认插槽位置

<children-component>
    直接书写默认插槽内容
</children-component>
或者
<children-component>
    <template #default></template>
</children-component>
或者
<children-component>
    <template slot="default"></template>
</children-component>

具名插槽

定义插槽时声明插槽名称，则称为具名插槽

• 定义

<slot name="slot-name"></slot>

• 使用
  在父组件中子组件标签内标明插槽内容

<children-component>
    <template v-slot:slot-name></template>
</children-component>
或者简写为：
<children-component>
    <template #slot-name></template>
</children-component>
或者
<children-component>
    <template slot="slot-name"></template>
</children-component>

作用域插槽

子组件内定义插槽是添加prop属性，可以像父组件传递参数

• 定义

<slot name="slot-name" age="18", size="medium"></slot>
<slot age="18", size="medium"></slot>

• 使用
  父组件的子组件标签内：在插槽标签内使用slot-scope属性，即可以使用插槽内容中的prop属性

scoped是从子组件定义插槽时，给组件添加的所有prop属性组成的数组
<children-component>
    <!-- 默认插槽只需要v-slot="scoped" -->
    <template v-slot:slot-name="scoped"></template>
</children-component>
<!-- 或者简写为: -->
<children-component>
    <template #slot-name="scoped"></template>
</children-component>
<!-- 或者 -->
<children-component>
    <template slot="slot-name" slot-scoped="scoped"></template>
</children-component>

后备内容

如果父组件没有自定义子组件的插槽内容时，默认展示插槽定义时的后背内容

<!-- 定义插槽时 -->
<slot>
    <!-- 后备内容，比如：
    <button></button> -->
</slot>

重命名插槽

<!-- 父组件内,相当于在父组件中给插槽的某个属性重命名 -->
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

默认值

当子组件传出的prop为未定义时，父组件提供了一个默认值

<children-component>
    <template slot-scoped="{name='noway'}"></template>
</children-component>