插槽(后备内容、具名插槽、作用域插槽)

插槽 

插槽可以向一个组件传递内容，让父组件可以向子组件指定的位置插入html结构，也是一种组件间的通信方式，适用于父组件-->子组件

后备内容

为一个插槽设置具体的后备（也就是默认的）内容，将其放在<slot>标签内，它只会在没有提供内容时被渲染，但如果提供内容，则这个提供的内容将会被渲染取代后备内容

具名插槽

需要多个插槽时，<slot>有个name的attribute，可以用来定义额外的插槽，一个不带name的<slot>出口会带有隐含的名字default。

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。 任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

缩写：把参数前的所有内容（v-slot）替换为字符#

编译作用域

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

作用域插槽

父组件调用子组件时，若想展示子组件的数据，由于数据是在子组件中，父组件无法访问，此时通过作用域插槽可以做到。如下所示

<span>

<slot v-bind:user="user">//user属性是插槽prop，将子组件data中数据在此处进行绑定

{{ user.lastName }}

</slot>

</span>

绑定在<slot>元素上的attribute被称为插槽prop。在父级作用域上，可以使用带值的v-slot来定义提供插槽prop的名字：

<current-user>

<template v-slot:default="slotProps">  //slotProps是包含所有插槽prop的对象，也可用其他名称命名

{{ slotProps.user.firstName }}//这里获得子组件中国的数据

</template>

</current-user>

独占默认插槽的缩写语法

当被提供的内容只有默认插槽时，组件的标签才可以被当做插槽的模板来使用

<current-user v-slot="slotProps">

{{ slotProps.user.firstName }}

</current-user>

默认插槽的缩写语法不能与具名插槽混用，因为它会导致作用域不明确

解构插槽

作用域插槽的内部工作原理是将插槽的内容包裹在一个拥有单个参数的函数里

function (slotProps) {

// 插槽内容

}

故v-slot的值可以是任何能够作为函数定义的参数的JavaScrip表达式。在支持的环境下（单文件组件或现代浏览器），你也可以使用ES2015解构来传入具体的插槽prop，可以使模板更简洁，如下

<current-user v-slot="{ user }">

{{ user.firstName }}

</current-user>

可以进行重命名，定义后备内容

动态插槽名

动态指令参数可以用在v-slot上，定义动态的插槽名

<base-layout>

<template v-slot:[dynamicSlotName]>

...

</template>

</base-layout>