HTML中：
<todo-item @delete="handleDelete" v-for="item in list":title="item.title":del="item.del">pHb易塔云建站-模板下载,web开发资源,技术博客
<template v-slot:pre-icon={value}>pHb易塔云建站-模板下载,web开发资源,技术博客
<span>前置图标{{value}}</span>pHb易塔云建站-模板下载,web开发资源,技术博客
</template>pHb易塔云建站-模板下载,web开发资源,技术博客
<template v-slot:suf-icon>pHb易塔云建站-模板下载,web开发资源,技术博客
<!--<span>后置图标</span>这里不写，就渲染默认值 -->pHb易塔云建站-模板下载,web开发资源,技术博客
</template>pHb易塔云建站-模板下载,web开发资源,技术博客
</todo-item
把template想象成一个函数。pHb易塔云建站-模板下载,web开发资源,技术博客
注册组件中：
data: function() {pHb易塔云建站-模板下载,web开发资源,技术博客
return {pHb易塔云建站-模板下载,web开发资源,技术博客
value: Math.random()pHb易塔云建站-模板下载,web开发资源,技术博客
}pHb易塔云建站-模板下载,web开发资源,技术博客
},pHb易塔云建站-模板下载,web开发资源,技术博客
template: `pHb易塔云建站-模板下载,web开发资源,技术博客
<li>pHb易塔云建站-模板下载,web开发资源,技术博客
<slot name="pre-icon" :value="value"></slot>pHb易塔云建站-模板下载,web开发资源,技术博客
<span v-if="!del">{{ title }}</span>pHb易塔云建站-模板下载,web开发资源,技术博客
<span v-else style="text-decoration: line-through;">{{ title }}</span>pHb易塔云建站-模板下载,web开发资源,技术博客
<slot name="suf-icon">哈哈</slot>pHb易塔云建站-模板下载,web开发资源,技术博客
<button v-show="!del" @click="handleClick">删除</button>pHb易塔云建站-模板下载,web开发资源,技术博客
</li>pHb易塔云建站-模板下载,web开发资源,技术博客
`,
把slot想象成通过name函数名调用这个函数，然后传了一个value作为参数给这个函数。返回的是一个span标签。pHb易塔云建站-模板下载,web开发资源,技术博客
本质上：是一个返回组件的函数。pHb易塔云建站-模板下载,web开发资源,技术博客
总结：插槽是一种传递复杂内容的一种方式，仅仅是因为我们在模板语法中没有办法使用简单的属性去传递这些复杂的内容，所以说才设计了这样一种API，用来传递这些复杂的内容。
