Vue中插槽slot的使用

　　插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。

　　因为插槽是一块模板，因此，对于任何一个组件，从模板种类的角度来分，其实均可以分为非插槽模板和插槽模板两大类。

　　非插槽模板指的是html模板，好比‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制；

　　插槽模板是slot，它是一个空壳子，由于它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。可是插槽显示的位置却由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板未来就显示在什么位置。

一、插槽内容

　　vue实现了一套内容分发的api，将 slot 元素做为承载内容分发的出口。

　　插槽内能够包含任何模板代码，包括html，以及其余组件。

　　若是组件内没有一个 slot 元素，那么该组件起始标签和结束标签之间的任何内容都会被抛弃。

二、编译做用域

　　规则：父级模板里的全部内容都是在父级做用域中编译的；子模板里的全部内容都是在子做用域中编译的。

三、后备内容

　　有时为一个插槽设置具体的后备 (也就是默认的) 内容是颇有用的，它只会在没有提供内容的时候被渲染。

　　很简单，就是默认值的概念。<slot>Submit</slot>

四、具名插槽

　　须要多个插槽的状况，slot 元素有一个特殊的属性：name，用来定义额外的插槽。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

　　在向具名插槽提供内容的时候，咱们能够在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<template v-slot:footer> <p>Here's some contact info</p> </template>

　　如今 <template> 元素中的全部内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

　　注意：v-slot只能添加在一个 <template> 上（有一种例外），这一点和已废弃的slot特性不一样

五、做用域插槽

<current-user> {{ user.firstName }} </current-user> 

　　上述代码不会正常工做，由于只有 <current-user> 组件能够访问到 user 而咱们提供的内容是在父级渲染的。为了让 user 在父级的插槽内容可用，咱们能够将 user 做为 <slot> 元素的一个特性绑定上去：

<span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span>

　　绑定在 <slot> 元素上的特性被称为插槽 prop。如今在父级做用域中，咱们能够给 v-slot 带一个值来定义咱们提供的插槽 prop 的名字：

<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>

　　咱们选择将包含全部插槽 prop 的对象命名为 slotProps，但你也可使用任意你喜欢的名字。

　　（1）独占默认插槽缩写方式：

　　当被提供的内容只有默认插槽时，组件的标签才能够被看成插槽的模板来使用。这样咱们就能够把 v-slot 直接用在组件上，这也就是上面说的例外状况

<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user>

　　注意：只要出现多个插槽，请始终为全部的插槽使用完整的基于 <template> 的语法

　　（2）解构插槽：

　　做用域插槽的内部工做原理是将你的插槽内容包括在一个传入单个参数的函数里，这意味着 v-slot 的值实际上能够是任何可以做为函数定义中的参数的 JavaScript 表达式，因此能够利用ES6的解构来传入参数

<current-user v-slot="{ user: person }"> {{ person.firstName }} </current-user>

　　解构：v-slot="{ user }"

　　重命名：v-slot="{ user: person }"

　　定义默认值：v-slot="{ user = { firstName: 'Guest' } }"

六、动态插槽名

　　<template v-slot:[dynamicSlotName]> ... </template>

七、缩写

　　v-slot:header 能够被重写为 #header

八、其余示例

　　主要来自官网学习整理：https://cn.vuejs.org/v2/guide/components-slots.html