v-slot vue插槽 具名插槽 作用域插槽 解构插槽

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 < slot > 元素作为承载分发内容的出口。

• 如下简单实例，如果 < Child> 的 template 中没有包含一个 < slot >元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
  

后备内容（你有你显示，没有我代替）

• 只会在没有提供内容的时候被渲染。(这种经常用到)
  
  
  

具名插槽

• 有时候一个满足不了需求的时候，我们需要多个插槽，对于这样的情况，< slot > 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：如下
  补充：
• 一般而言，v-slot 只能添加在 < template >上。
• 一个不带 name 的 < slot > 出口会带有隐含的名字“default”。

现在 < template > 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 < template > 中的内容都会被视为默认插槽的内容。就是上例中的 middle 会被默认为是 右侧 main 的内容

作用域插槽

场景：需要访问子组件的值来显示

独占默认插槽的缩写语法

• 在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上

• 这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽
  

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

• 只要出现多个插槽，请始终为所有的插槽使用完整的基于 < template > 的语法：
  

解构插槽 Prop

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

• 这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：

• 这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

• 你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

动态插槽名

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

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header，
然而，和其它指令一样，该缩写只在其有参数的时候才可用。

以上内容是插槽基本用法，前面实例展示，后面借助官网例子。更多解读可参照官方文档插槽——Vue.js