Vue中的slot

slot即“插槽”，插槽会在子组件须要的位置插入须要的内容，插槽的显示和内容等均由父组件控制。slot很是实用，它使vue中父子组件代码更加灵活，在不少使用场景下都能发挥不错的效果。

使用方法

默认使用

先看示例：

这是子组件

    <template id="son">
        <div>
            <h2>我是儿子</h2>
            <slot></slot>
        </div>
    </template>
复制代码

这是父组件

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <p>插槽</p>
        </son>
    </div>
复制代码

最后的显示效果为：

插槽能够理解为提早在子组件中挖个坑，而后经过父组件对填入坑的内容物进行相关配置与控制，使其显示咱们须要的结果。

具名插槽

顾名思义，具名插槽即有名字的slot，具名插槽让子组件能够高度定制化，它使得能够在子组件中加入多个slot而且可以重复调用。

仍是看示例：

这是子组件

<template id="son">
        <div>
            <h2>我是儿子</h2>
            <slot name="a"></slot>
            <slot name="b"></slot>
            <slot name="a"></slot>
        </div>
</template>
复制代码

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <p slot="a">a</p>
            <p slot="b">b</p>
        </son>
</div>
复制代码

运行结果是这样：

插槽依据名字填入内容物，使用起来很是方便灵活：

做用域插槽

做用域插槽能够在插槽上携带数据，看示例比较好理解：

这是子组件

    <template id="son">
        <div>
            <h2>我是儿子</h2>
            <slot :data="num"></slot>
        </div>
    </template>
复制代码

子组件中有一些数据

let son = {
        template: "#son",
        props: {
            fatherstr: {
                type: Number
            }
        },
        data() {
            return {
                num: [1, 2, 3]
            }
        },
    }
复制代码

这是父组件

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <div slot-scope="num">
                <div v-for="i in num.data">
                    {{i}}
                </div>
            </div>
        </son>
    </div>
复制代码

运行效果这样：

结束

本文是学习过程当中的小小总结，但愿有所帮助。