插槽（slot）

插槽

• 插槽是vue为组件的封装提供的功能
• 允许开发者在封装组件时，把不确定的、希望用户指定的部分定义为插槽
• 即在组件调用的标签中把自定义内容插入对应组件的slot区域

子组件的插槽区域
slot声明一个插槽区域
vue官方规定：每个slot插槽都要有一个name名称
如果省略了slot的name属性，则有一个默认名称叫做default，当所有插槽都命名时，默认将内容填充到所有未命名的插槽中

第一种

<cp1>yuyuyjh
        <h1 slot="b"> 我是1111 </h1>
        <h1> 我是2222 </h1>
        <h1 slot="a" slot-scope="scp"> 我是333 {{ scp.k }} {{ scp.t }}  </h1>
    </cp1>

<script>
    // cp1当时使用的是 slot-scope 是2.6后废弃但是并没有移除的用法  意思就是还可以使用 实际情况很多第三方的UI组件也的确还在使用 比如elementui
    Vue.component('cp1',{
        data(){
          return {
              kfc:'kfc没有麦辣鸡'
          }
        },
        template: ` <div>
                            我是cp1组件=====>
                            <slot></slot>
                            <==============
                                <!--  以后要分发到 name=a的插槽的内容 可以通过设置 slot-scope属性来读取 slot上除了name属性意外的其他attribute    -->
                             <slot name="a" :k="kfc" t="789"></slot>
                             =============>
                             <slot name="b"></slot>
                    </div>`
    })
    new Vue({
        el:'#app',
    })
</script>

第二种

<cp2>
        <template v-slot:b="scp">
            <h1> 我是1111 {{ scp.jgm }} </h1>
        </template>
        <template v-slot>
            <h1> 我是2222 </h1>
        </template>
        <template #a>
            <h1> 我是333 </h1>
        </template>
</cp2>

<script>
    Vue.component('cp2',{
        template:`<div>
                    我是
                       <slot name="a"></slot>
                        +++++++++++++++
                        <slot></slot>
                        ++++++++++++++
                         <slot name="b" jgm="金拱门没有嫩牛五方"></slot>
                    </div>`
    })
    new Vue({
        el:'#app',

    })
</script>