插槽

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

插槽的声明:slot标签

<!--需要设置插槽的子组件-->
<template>
 <div class="com-container">
     <h3>组件com</h3>
     <hr></hr>
     
     <!--声明一个插槽区域-->
     
     <slot>这是该插槽的后备内容</slot>
     
     
 </div>
</template>

插槽的使用

<!--要引用带插槽组件的父组件-->
<teamplate>
    <div class="app-container">
        <!--引入组件com>
        <com>
            <!--此处编辑要放入插槽的内容-->
            <p> 这里是com组件的内容区域:声明的p标签</p>
        </com>
    </div>
</teamplate>

插槽的name属性:

vue官方规定，每一个插槽，都要有一个name名称
若省略了该属性，则name默认值为"default"

<!--需要设置插槽的子组件-->
<teamplate>
 <div class="com-container">
     <h3>组件com</h3>
     <hr></hr>
     
     <!--声明一个插槽区域-->
     
     <slot name="slotName">这是slotName插槽的后备内容</slot>
     
     
 </div>
</template>

v-slot:将内容插入指定的插槽(该v指令简写为#)

默认情况下，组件插槽区的内容会放入name="default"的插槽中
若要指定插槽，需使用v-slot指令

注意： v-slot指令只能添加在template标签中

<!--要引用带插槽组件的父组件-->
<teamplate>
    <div class="app-container">
        <!--引入组件com>
        <com>
            <!--v-slot指令只能添加在component标签或template标签中-->
            <!--template标签是虚拟标签，只起到包裹作用，不会在HTML中生成该元素-->
            <template v-slot="slotName">
                <p> 这里是com组件的内容区域:声明的p标签</p>
            </template>
        </com>
    </div>
</teamplate>

后备内容(默认内容)

当用户未插入任何内容是，则插槽的后备内容生效