插槽就是在使用组件时把组件之间的内容插入到组件指定的位置

匿名插槽

定义一个组件Slot 它的模板如下

<div>
    <slot></slot>
</div>

当在其它组件中使用这个组件时先引入注册然后再使用

第一种情况

<Slot>1234</Slot>

那么这个1234就会插入到slot的位置上

第二种情况

<Slot>
    <template  v-slot:default>1234</template>
</Slot>

这个也会插入到指定位置匿名插槽的默认名字是default template不会在页面出现(没有任何的语义化)

插槽内也可以包含html标签也可以包含其他的组件

<Slot>
    <template  v-slot:default>1234</template>
    <span>hello</span>
     <font-awesome-icon name="user"></font-awesome-icon>
</Slot>

具名插槽

顾名思义这个插槽需要指定名字

定义一个组件Slot 它的模板如下

<div>
    <slot name='wangcai'></slot>
</div>

当在其他组件中使用这个组件时

<Slot>1234</Slot>

1234不会被插入到指定的位置必须指定对应的名字后才可以正确的插入

正确的写法如下

<Slot>
    <template  v-slot:wangcai>1234</template>
</Slot>

可以把v-slot:wangcai用#wangcai代替

<Slot>
    <template  #wangcai>1234</template>
</Slot>

注：当使用具名插槽时，使用template标签进行v-slot，只有一种情况不需要使用template标签直接在组件上v-slot,那就是作用域中的匿名插槽，详情如下

当在其他组件中使用navigation-link这个组件时,它会访问所在组件的任何属性,但不能访问navigation-link组件中的属性

<navigation-link url="/profile">
  Logged in as {{ user.name }}  //能获取
  Clicking here will send you to: {{ url }} //不能获取
</navigation-link>

上面的user.name可以获取到因为是所在组件中的属性，而url是所在组件要传给navigation-link组件,只能在navigation-link组件中获取，而在当前组件是不可以获取到的

写这个之前先了解一下编辑作用域

定义一个组件Slot，它的模板如下：

<div>
    <slot></slot>
</div>

它的属性：

user:{
    name:'wangcai',
    age:100
}

当在其他组件使用时并且想要使用Slot组件中的属性时

(1) 需要在Slot组件中把数据带过来

<div>
    <slot :user='user'></slot>
</div>

(2) 在其他组件中，需要以下的设置

<Slot>
    <template v-slot:default='ctx'>
        来自Slot组件的数据:{{ctx.user.name}}
    </template>
</Slot>

ctx是一个名字，可以根据自己使用的作用进行设置，也可以把ctx带上{}(解构插槽prop)，上面的就可以把Slot组件中的name插入到Slot对应的位置上

另一种写法:

因为在Slot组件中是匿名插槽，则在其他组件中也可以这样设置(把default省略)

<Slot>
    <template v-slot='ctx'>
        来自Slot组件的数据:{{ctx.user.name}}
    </template>
</Slot>

当在其他组件中使用

<Slot>123</Slot>

也可以被插入到相应位置

注：上面的写法还可以更为简便只有匿名插槽时才可以

<Slot v-slot='ctx'>
    来自Slot组件的数据:{{ctx.user.name}}
</Slot>

 <Slot #default='ctx'>
    来自Slot组件的数据:{{ctx.user.name}}
</Slot>

注：上面缩写时的default必须带上否则会警告

定义一个组件 Slot,它的模板如下

<div>
    <slot name='wangcai' :user='user'></slot>
</div>

在其他组件中使用

<Slot>123</Slot> //不会被插入 同具名插槽
<Slot>
    <template v-slot:wangcai='ctx'>
        来自Slot组件的数据{{ctx.user.name}}
    </template>
</Slot>

第二个会把name插入到Slot组件对应的位置

当在Slot组件中有插槽，并且希望其他组件使用的时候把内容插入到相应的位置，但是有时候其他组件并不提供插槽内容时，那么可以在Slot的插槽中先设置一个后备内容，其他组件没有提供插槽内容时，使用后备内容；当指定内容时，就把后备内容被提供的内容所代替。

在Slot组件中

<div>
    <slot>后备内容</slot>
</div>

使用Slot组件的

<Slot></Slot> //会使用后备内容
<Slot>1234</Slot> //会使用1234