vue插槽

前言：

           Vue插槽是Vue中常见的一种组件间的相互通信方式，就是子组件中的提供给父组件使用的一个占位符。

           插槽分为三种 : 默认插槽  具名插槽    作用域插槽 

vue插槽的作用：

       是让父组件可以向子组件指定位置插入html结构，适用于父组件===>子组件，在要接收数据的组件页面通过<slot>标签来表示，简单来说，就是通过此标签来起到占位的作用，而要插入的内容也会对应到标签所在的位置。

 一、默认插槽

        默认插槽是插槽最基本的方式，也称为匿名插槽。

        首先在父组件App.Vue中引入子组件，并在引入的子组件标签内插入需要 的html元素，在子组件中把需要用插槽的地方用<slot>标签替代：

        子组件:  <slot> 插槽默认内容 </slot>

        父组件:  <子组件> html结构 </子组件>

二、具名插槽

        简单来说，具名插槽就是有名字的插槽。

        具名插槽需要我们将 div 写在 template内，而且声明时需要使用 slot="name" 属性，在子组件中的 slot 标签中接收，传过来的name：

        子组件: 给插槽添加一个name(插槽名)

                  <slot name="插槽名"> 插槽默认内容  </slot>

         父组件: 使用 v-slot:插槽名 或  #插槽名

                  <子组件>

                     <template v-slot:插槽名>

                          html结构

                     </template>

                  </子组件>

   具名插槽和默认插槽有什么不同呢？

           有时候我们会遇到这种场景，在一个组件中，我们虽然可以复用组件的结构，但是往往，有时候我们会遇到一个组件多用，但是结构稍微有所差别的情况，这时，就会用得到具名插槽。

 三、作用域插槽

        作用域插槽是带数据的插槽。

        子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。

        作用域插槽 需要将内容写在 template 标签内，在父组件中通过 slot-scope 来接受子组件提供的参数：

      子组件 : 给<slot>内置组件添加自定义属性

                   <slot 属性名="属性值" > 插槽默认内容 </slot>

       父组件 :  使用 v-slot="对象名"

                    <template slot-scope="{ 属性值 }">

                            html结构

                    </template>