7. slot 是什么？有什么作用？原理是什么？

slot 又名插槽, 是 Vue 的内容分发机制, 组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板标签元素, 而这一个标签元素是否显示, 以及怎么显示是由父组件决定的。slot 又分三类, 默认插槽, 具名插槽和作用域插槽。

• 默认插槽: 又名匿名插槽, 当 slot 没有指定 name 属性值的时候一个默认显示插槽, 一个组件内只有有一个匿名插槽
• 具名插槽: 带有具体名字的插槽, 也就是带有 name 属性的 slot, 一个组件可以出现多个具名插槽
• 作用域插槽: 默认插槽、具名插槽的一个变体, 可以是匿名插槽, 也可以是具名插槽, 该插槽的不同点是在子组件渲染作用域插槽时, 可以将子组件内部的数据传递给父组件, 让父组件根据子组件的传递过来的数据决定如何渲染该插槽

实现原理: 当子组件 vm 实例化时, 获取到父组件传入的 slot 标签的内容, 存放在 vm.$slot 中, 默认插槽为 vm.$slot.default, 具名插槽为 vm.$slot.xxx, xxx 为插槽名, 当组件执行渲染函数时候, 遇到 slot 标签, 使用 $slot 中的内容进行替换, 此时可以为插槽传递数据, 若存在数据, 则可称该插槽为作用域插槽。