vue中slot插槽

插槽里边我们需要着重记忆的
插槽内容
具名插槽
作用域插槽
解构插槽

什么是slot

在标签中写的内容会自动出现在slot组件中

如果有了slot 我们可以让组件变得更加丰富多彩

如果有多个slot 那么组件标签中的内容就会出现在所有默认的slot中

具名插槽(具有名字的插槽)

        如果一个组件模板中有多个slot组件标签  为了合理的分配slot 我们可以给slot添加name属性
        给它起名字

        组件模板
            {
                template: `
                    <div>
                        <slot name="自定义名字1"></slot>
                        <slot name="自定义名字2"></slot>
                        ...
                    </div>
                `
            }

        组件中（让第一个slot对应渲染p元素  第二个slot对应渲染div元素）
            <组件标签>
                <p slot="自定义名字1">1111</p>
                <div slot="自定义名字2">222</div>
            </组件标签>

独占 默认插槽

        一个组件模板中 只有一个slot 并且这个slot没有设置name属性
        这种形式我们称之为 独占 默认插槽
        如果只有一个slot 则该slot有一个默认名 叫 default

    后备内容
        当组件被调用 但是组件标签中间没有写内容  我们想让它显示默认一些内容  这个时候可以使用后备内容
        
        使用就是
            在组件中slot插槽标签中间可以写上默认的内容  当组件被调用 但是组件中没有写内容  则显示slot
            组件中的默认内容  如果写了内容 则正常显示写入的内容

作用域插槽

        有时让插槽内容能够访问子组件中才有的数据是很有用的

        (1)使用slot-scope进行子组件数据的获取
                1.在子组件模板中添加slot 并在slot标签上进行数据的绑定
                    template: `
                        <div class="test">
                            <slot :自定义名称="传递内容"></slot>
                        </div>
                    `

                2 在对应的子组件标签内容上 写上template标签  在标签上使用slot-scope进行数据接收
                    <子组件标签>
                        <template slot-scope="新的自定义名称">
                           <p>{{新的自定义名称}}</p>  
                           // 这里返回的数据是一个对象 可以根据需求进行二次取值
                        </template>
                    </子组件标签>
                    
                    另一种也可以直接将slot-scope直接写在需要获取数据的标签上边
                        <p slot-scope="新的自定义名称">{{新的自定义名称}}</p>


        (2)在vue2.6.0新增 v-slot指令(具名插槽 作用域插槽)
            缩写：
                #

            1 在子组件的模板中 如果只有一个slot标签
             v-slot 或者 v-slot:default 叫做独占默认插槽 
             <子组件标签>
                <template v-slot:default="新的自定义名称">  // #default
                    <p>{{新的自定义名称}}</p>
                </template>
             </子组件标签>

             注意：
                v-slot指令只能用在template组件标签 或者 components上边

    解构插槽
        可以直接将得到的对象或者是数组 结构开来 直接拿取里边的属性