Vue——slot

　　阅读Vue应用代码时看到自定义组件中使用了<slot>标签，刚开始还不知道它的用法，有点陌生，后来在Vue的官网中了解到，这是插槽的用法，不过在 Vue 2.6.0 中，Vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。Vue实现的一套内容分发的API，将<slot> 元素作为承载分发内容的出口，简单来说若自定义组件中没有<slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃，而正是自定义组件中含有<slot>标签，这样在使用自定义组件时可以将起始标签和结束标签之间的内容填充到<slot>标签所在的位置，这就是插槽的作用；插槽内可以包含任何模板代码，包括 HTML。

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

　　（1）一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

　　（2）<slot> 元素有一个特殊的 attribute：name，这个 attribute 可以用来定义额外的插槽。

　　（3）在向具名插槽提供内容的时候，可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

　　（4）v-slot 只能添加在 <template> 上，不过当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用，这样就可以把 v-slot 直接用在组件上。

　　（5）在Vue2.x版本中还是可以继续使用slot attribute，在<template>上使用特殊的slot attribute，可以将内容从父级传给具名插槽；或者直接把 slot attribute 用在一个普通元素上。

　　（6）在Vue2.x版本中还是可以继续使用slot-scope attribute ，在 <template> 上使用特殊的 slot-scope attribute，可以接收传递给插槽的 prop；slot-scope attribute 也可以直接用于非 <template> 元素 (包括组件)。

　　（6）在Vue3版本中将不会使用slot和slot-scope属性了。

 

　　题外话：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容ECMAScript 5 的浏览器。