插槽

（1）插槽  slot

Vue实现了一套 <strong>内容分发</strong> 的API

这套API的设计灵感源自Web Components 规范草案，将slot元素作为承载分发内容的 <strong>出口</strong>

（2）匿名插槽

父组件中写一个子组件，在子组件包裹书写的内容    如：

     <msg-slot> 这是一段内容 </msg-slot>

在子组件中，写上 <slot> 标签

（3）具名插槽

父组件中写一个子组件，在子组件的包裹写插槽        如：

     <name-slot>                                                                                                                <template v-slot:title>温馨提示</template>>                                        <!--                                                                                                                            slot传值，v-slot:body="变量"                                                                                    变量就是body插槽上的属性集合                                                                             -->                                                                                                                            <template v-slot:body='data'>                                                                                            <p>您确认删除吗？</p>                                                                                         <p>{{data.abc}}--{{data.content}}</p>                                               </template>>                                                                                                           <template v-slot:footer>                                                                                                       <div>                                                                                                                <button>确认</button>>                                                                                          <button>取消</button>>                                                                                     </div>                                                                                                               </template>>                                                                                                          <h1>{{info}}</h1>                                                                                </name-slot>

子组件

         <!--                                                                                                                                具名插槽                                                                                                            name 值和传过来的v-slot值对应                                                                              实际界面显示的顺序由实际的插槽布局来决定                                                 -->

         <slot name="title"></slot>                                                                                     <!-- body插槽 传值对应外面的body -->                                                                  <slot name="body" content="随便写-子组件数据" :abc="msg"></slot>                    <slot name="footer"></slot>                                                                                  <!-- 默认插槽 用来显示匿名插槽的内容 -->                                                      <slot></slot>