Slot的作用和原理

定义

• slot 又名插槽，是 Vue 的内容分发机制，组件内部的模板引擎使用，slot 元素作为承载分发内容的出口

作用

• 当组件渲染的时候， 将会被替换为我们自己在模板标签里面写的字。插槽内可以包含任何模板代码，包括 HTML，如果组件没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

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

分类

• 默认插槽
  • 又名匿名插槽，当 slot 没有指定 name 属性值的时候一个默认显示插槽，一个组件内只有一个匿名插槽
• 具名插槽
  • 有时我们需要多个插槽 , 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：一个不带name 的 出口会带有隐含的名字“default”
  • 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容
  • 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 # 例如 v-slot:header 可以被重写为 #header，和其它指令一样，该缩写只在其有参数的时候才可用

• 作用域插槽
  • 默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽
  • 让插槽内容能够访问子组件中才有的数据
  • 为了让user在父级的插槽内容中可用，我们可以将user作为 元素的一个特性绑定上去
  • 实现原理：当子组件 vm 实例化时，获取到父组件传入的 slot 标签的内容，存放在 vm.$slot 中，默认插槽为 vm.$slot.default，具名插槽为vm.$slot.xxx，xxx为插槽名，当组件执行渲染函数时候，遇 到 slot 标签，使用$slot 中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽

解构插槽prop

• 属性可以绑定多个, 只需设置不同的bind即可,还可以给解构赋值的变量设置默认值 ( 但是会发出警告)
• 作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式
• 在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person