什么是插槽

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。

插槽有两种

1.具名插槽

给具体的插槽命名，并在使用的时候传入插槽的名称

import Vue from 'vue'

// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <div>
                <slot name="header"></slot> // 定义一个名称为header的插槽
            </div>
            <div>
                <slot name="body"></slot> // 定义一个名称为body的插槽
            </div>
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            }
        }
    }   
}
————————————————
版权声明：本文为CSDN博主「星空之火@田兴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43638968/article/details/103923899

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123',
            val2: '456'
        }
    },
    template: `
        <div>
            <com-one>
                <span slot="header">{{val1}}</span> // 使用插槽'header**重点内容**'
                <span slot="body">{{val2}}</span> // 使用插槽'body'
            </com-one>
        </div>
    `
})
————————————————
版权声明：本文为CSDN博主「星空之火@田兴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43638968/article/details/103923899

2.作用域插槽

将定义插槽的变量作用域到使用插槽中

import Vue from 'vue'

// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <slot :aa="val1" :bb="val2"></slot> // 给插槽传入变量
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            },
            val1: 'slot1',
            val2: 'slot2'
        }
    }   
}
————————————————
版权声明：本文为CSDN博主「星空之火@田兴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43638968/article/details/103923899

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123'
        }
    },
    template: `
        <div>
            <com-one>
                <span slot-scope="props">{{props.aa}}{{props.bb}}{{val1}}</span> // 定义插槽传入的对象props,并使用
            </com-one>
        </div>
    `
})
————————————————
版权声明：本文为CSDN博主「星空之火@田兴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43638968/article/details/103923899