vue插槽slot的学习笔记(查了N篇文档的收获)

前言：
vue文档不知过了几遍，每次slot看的都是一头雾水。查了很多文档都解决不了自己疑惑的地方，这次终于搞明白了（自认为）。希望和我有同样疑惑的小伙伴可也解惑

正文开始了
 一、插槽内容
     1、Vue 官网解释：Vue 实现了一套内容分发的 API，其设计来源于 Web Components 规范草案，并将<slot>元素作为承载分发内容的出口；
     2、个人理解：在父组件中使用子组件时，在子组件标签中间是不能写任何代码的，即使写了也不会显示。这时，如果父组件在使用子组件时，想要在子组件标签之间加入新的内容（任何内容都可以，html、text、插值表达式），即可在子组件中添加<slot></slot>标签去承载这部分代码；
     3、插槽存在的意义：我们会把能够复用的代码拆分成一个公用组件，但是这些公用组件在使用的时候并不总能符合所有的使用要求（例如一个按钮的公用组件，在某一处使用时，我们可能会想只是在这一次的使用中为按钮添加一个说明）。此时，则需要在此组件中为这个公用组件添加一个一次性的功能，就可以使用 slot 插槽在公用组件中去承接这部分代码；
     4、纵观以上3点，插槽显示的内容将由父组件决定，而插槽显示的位置则由承载的子组件（即上述的公用组件）去决定。而插槽内容显示与否实际则是由父子组件共同决定的；
 二、编译作用域
     1、实质：由于组件模板的编译都只是在自己的作用域中，所以插槽只能使用自己组件中的数据；
 三、后备内容（默认内容）
     1、可以在<slot></slot>标签中间提供插槽的后备内容，这样当父组件没有内容要显示时，该后备内容将被渲染。但若是父组件提供了插槽内容，则后备内容将被替换；
 四、具名插槽（2.6.0以上版本）
     1、插槽可以分为：默认插槽和具名插槽两种；
          1）默认插槽：即在子组件定义的该插槽默认去承接父组件在使用该子组件时，在子组件标签中间新增的所有内容；
          2）具名插槽：此时就是需要子组件中定义多个插槽，去承接父组件中新增的内容。该情况会出现在父组件中想要展示的内容需要在某些特定的位置时；
     2、<slot>元素有一个特殊的 attribute：name 。这个 attribute 可以用来将父组件中定义了 name attribute 的内容对应到子组件的具有相同 name attribute 的<slot>元素中；
     3、一个不带 name 的 <slot> 出口会有隐含的名字 “default”。即默认插槽；
     4、在使用具名插槽时，在父组件中可以在<template>元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
          1）注意：v-slot 指令只能添加到 <template> 元素上。只有在组件中值存在默认插槽时，组件的标签才可以被当做插槽模板使用，此时才可以把 v-slot 直接用在组件上；
     5、没有提供 v-slot 指令的内容，将会被视为默认插槽的内容。而该部分内容既可以被显示的包裹在一个定义了指令为 v-slot：default 的 <template> 元素中，也可以不做处理，子组件中的默认插槽会接收余下的所有内容；
 五、作用域插槽（2.6.0以上版本）
     1、在使用插槽时，插槽能够访问的只有当前组件中的数据。因为插槽实际上就是组件中的 html 模板内容。而模板在编译的时候只能访问当前组件中的数据；
     2、当需要在父组件中的插槽内容能够访问到子组件中才有的数据时，可以在子组件的<slot>标签中使用 v-bind 去绑定这个数据，绑定在 <slot> 元素上的 attribute 称为插槽 prop。并在父组件中使用带值的 v-slot 来定义提供的插槽 prop 的名字即可；
     3、独占默认插槽的缩写语法
          1）当被提供的内容只有默认插槽时，组件的标签才可以被当做插槽的模板使用。即可以把 v-slot 直接用在组件上；
          2）在只有一个默认插槽时，v-slot 的绑定可以用更简便的写法，即不适用参数，它将被假定对应默认插槽；
          3）注意：默认插槽的缩写语法不能和具名插槽混用，会导致作用域不明，报错；
          4）只要出现多个插槽，需要始终为所有的插槽使用完整的<template>的语法；
     4、解构插槽 Prop
          1）作用域插槽的内部工作原理是将插槽的内容包括在一个传入单个参数的函数里。那么，v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式；
          2）在支持的环境下（单文件组件或现代浏览器），可以使用 ES2015 解构来传入具体的插槽 prop。
               （1）eg1：单纯的解构<template v-slot="{ user }">{{user.name}}</template>
               （2）eg2：重命名的解构 <template v-slot="{ user:person }">{{person.name}}</template>
               （3）eg3：定义后备内容的解构 <template v-slot="{ user ={ name:cooper } }">{{user.name}}</template>