Vue slot插槽

--- highlight: agate

  在vue中，插槽是我们在项目经常会使用的，比如说当成一个布局模板，封装成一个组件来进行复用，其他页面需要使用类似的布局只需要传对应的内容到对应名字的插槽，不需要将模板在每个组件重新写一遍，减少代码冗余，提高开发效率

什么叫是插槽？

  插槽就是子组件提供给父组件的一个占位符,叫做slot，父组件可以在这个占位符里中填充代码，包括HTML和组件，填充的内容会替换掉子组件的slot，可以把它想像为一个坑，父组件用来填坑

使用插槽

1.基本用法 定义一个父组件 2.写一个子组件
3.将子组件引入到父组件里 使用插槽 现在子组件中使用了插槽slot之后，相当于留下了一个坑，占了个地方 4验证是否成功 这就是插槽最基本的使用

具名插槽

所谓具名插槽，就是指有名字的插槽

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

<template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot 的 <template> 中的内容都会被视为默认插槽的内容 页面效果如下。

v-slot的写法

作用域插槽

为了让 obj在父级的插槽内容中可用，我们可以将 obj作为 slot 元素的一个 attribute 绑定上去 绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 slot-scope 来定义我们提供的插槽 prop 的名字 使用v-slot