我选择学习来做出改变

问题区 ＆ Todolist

1、插槽用来解决什么问题
2、插槽具体使用方法

一、用处

1. Vue 实现了一套内容分发的 API

这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

二、用法

1. 分发的内容放到起始和结束标签中间

内容（可以是html、vue组件）就可以将组件内的slot标签替换掉。

2. 编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

3.作用域插槽

（1）作用：实现在父级作用域中使用来自子组件的数据
（2）用法：
在子组件中slot绑定attribute（插槽prop），在父组件中定义子组件中定义插槽prop。

// 子组件
<template>
  <slot :info='infostate'> </slot>
</template>

v-slot默认定义了包含所有插槽prop的对象

//父组件
<Info v-slot='slotProp'>
  {{slotProp.name}}
</Info>