HTML中：

<todo-item @delete="handleDelete" v-for="item in list":title="item.title":del="item.del">
    <template v-slot:pre-icon={value}>
        <span>前置图标{{value}}</span>
    </template>
    <template v-slot:suf-icon>
    <!--<span>后置图标</span>这里不写，就渲染默认值 -->
    </template>
</todo-item

把template想象成一个函数。
注册组件中：

data: function() {
    return {
        value: Math.random()
    }
},
template: `
    <li>
        <slot name="pre-icon" :value="value"></slot>
        <span v-if="!del">{{ title }}</span>
        <span v-else style="text-decoration: line-through;">{{ title }}</span>
        <slot name="suf-icon">哈哈</slot>
        <button v-show="!del" @click="handleClick">删除</button>
    </li>
`,

把slot想象成通过name函数名调用这个函数，然后传了一个value作为参数给这个函数。返回的是一个span标签。
本质上：是一个返回组件的函数。
总结：插槽是一种传递复杂内容的一种方式，仅仅是因为我们在模板语法中没有办法使用简单的属性去传递这些复杂的内容，所以说才设计了这样一种API，用来传递这些复杂的内容。