（十一）插槽slot

一，使用场景和思考

1.需求：多个类型相同组件，但是需要展现不同内容。

2.思考：如果组件中显示的内容标签都是一样的，仅仅是数据不一样，可以复用组件，然后数据用循环展示即可。

可是如果组件中显示的部分标签都不一样该如何解决呢？使用插槽

二，默认插槽

组件模板中：
<template>
    <slot>xxxxxxxxxxxx</slot>
</template>

复用组件时，在父组件中的组件标签中：
<标签名>
    <img src="......."></img>
</标签名>

结果：该图片显示在solt标签处,如果上述没有<img>,则显示默认内容即上述的XXXXXXXX。

注意点：多次复用组件时，插槽的内容可以不同，slot标签仅仅是代表着插槽内容显示的位置。

三，具名插槽

根据名字匹配位置

复用组件时，在父组件中的组件标签中：
<标签名>
    <img src="......." slot="center"></img>
    <h1 slot="footer"></h1>
</标签名>

组件模板中：
<template>
    <slot name="center">xxxxxxxxxxxx</slot>
    <slot name="footer">xxxxxxxxxxxx</slot>
</template>

四，作用域插槽

 

使用场景：数据在组件中，不能放入使用此组件的组件即父组件。数据相同，但是结构即使用的                      标签是使用者决定的。

总结：将组件中的数据传入父组件中的此组件标签中

           scope和name两者值可以不同

复用组件时，在父组件中的组件标签中：
<标签名>
    <template scope="自定义名称">
        <img src="......."></img>
        <h1></h1>
    </template>
</标签名>

组件模板中：
<template>
    <slot :name="names">xxxxxxxxxxxx</slot>
 //name为此组件data中的数据，name为自定义名称，names为数据的名称
</template>