插槽允许我们在组件的template中定义一些“占位符”，将它们暴露出来，让父组件可以在它们内部插入任意内容。这个过程就像是在一个幻灯片中插入图片或文本框一样。

为什么要用插槽？

方便注入html结构，同时可以实现组件复用，同一类组件不必重复书写，只要每次注入不同的代码即可。

• 老版本命名：slot="名字"
• 新版本命名：v-slot:名字

//传入
//这里的3个模版会对应 传入名为title,footer的插槽。未命名的插槽会使用default
<my-component>
            <template v-slot:title>
                Vue
            </template>

            <template v-slot:default>
                Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
                的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
            </template>
            
            <template v-slot:footer>
                作者:尤雨溪
            </template>
</my-component>

//传出
//给插槽加上name就可以对应传入
 template: `<div class="article" :style="{color:color}">
            <div class="article-title" v-if="$slots.title">
                <slot name="title"></slot>
            </div>
            <div class="article-content">
                <slot></slot>
            </div>
            <div class="article-footer" v-if="$slots.footer">
                <slot name="footer"></slot>
            </div>
        </div>`,

注意

如果有多个插槽，那么需要用name标注，然后对应传入。没有命名的插槽，会默认为名字是default

插槽传入的时候可以使用父元素的方法和变量

     //这里使用了父元素的count变量以及addcount/doublecount方法
       <lw-article>
            <template v-slot:title> Vue:{{count}} </template>

            <template v-slot:default>
              Vue (读音 /vjuː/，类似于 view)
              是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue
              被设计为可以自底向上逐层应用。Vue
              的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue
              也完全能够为复杂的单页应用提供驱动。
              <p>
                <button @click="addCount">count++</button>
              </p>
            </template>

            <template v-slot:footer> 作者:尤雨溪: {{doubleCount}} </template>
     
          </lw-article>

插槽传入的时候可以使用子元素的方法和变量

首先，子元素要将自己的数据或者方法传出

//注意写法:day="day"
//前一个是传出数据的名字，可以自定义
//后一个是自己已有数据的名字，是已经决定的
//通常写一样的就好了

template: `  <div class="count-down">
            <slot :day="day" :hour="hour" :min="min" :sec="sec" :beauty="beauty"><span v-if="day>0">{{beauty(day)}}天</span> {{beauty(hour)}}:{{beauty(min)}}:{{beauty(sec)}}</slot>
        </div>`,

然后，父组件将所有传出的参数收集在slotScope中，然后用点语法调用。

<count-down :time="10000000">
            <!-- 父组件对应插槽名称接收子组件传入的数据 -->
    <template v-slot:default="slotScope">
        <span v-if="slotScope.day>0">{{slotScope.beauty(slotScope.day)}}天</span>
        {{slotScope.beauty(slotScope.hour)}}:{{slotScope.beauty(slotScope.min)}}:{{slotScope.beauty(slotScope.sec)}}
    </template>
</count-down>