vue 插槽 slot

个人理解

• 个人感觉，为同一组件在不同的情况添加不同的内容，不需要专门修改组件，就像 java 的多态，来提高复用性。比如: 就像一块基础设施完备的土地，给你划分好区域，只要这个位置没有归属权(name)，房子随便盖。

• 我们可以理解 slot 为占住当前的位置，方便我们插入内容。

• Vue 的插槽分为匿名插槽（单个插槽/默认插槽）、具名插槽、作用域插槽(带数据的插槽)

• vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效且不会出现在 Vue 3 中。

  // 这是 home 组件模板
  <template><div class='home'><p>我是home 组件</p><slot><h3>没传内容</h3></slot></div></template>//home 组件的内部内容
  <home>这是组件的内部内容</home>
  

slot 注意点

1. vue 插槽的编译作用域的规则: 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。(个人理解: 各自管各自的，谁也别干预谁。也是用 props 和 $emit 传递数据的原因之一吧。)

2. 组件模板中 没用 slot ，那组件内部 的内容 是不会被渲染的，直接抛弃。

   <home><span>{{msg}}</span>  //  报错，Property or method "msg" is not defined on the instance but referenced during render// 组件内部的数据，不是组件的，是其 父元素节点的Property or method。父元素节点没有声明，肯定报错。<p>是否能渲染</p>
   </home>// home 组件内部的内容全部会被抛弃，只渲染 home 的模板。等同于下面
   <home></home>
   

3. 插槽用 <slot>标签来确定渲染的位置,只能用一个默认插槽。组件内部所有的HTML内容都会被渲染到 slot 的位置。除了 template 标签绑定了 v-slot 指令 的内容 。

4. v-slot 指令, 它取代了 slot 和 slot-scope。

5. v-slot 简写把参数之前的所有内容 v-slot:替换为字符#。例如 v-slot:header可以被重写为 #header

   //具名
   <template slot="header"> 
   <template #header">    <!-- <template v-slot:header"> -->// 作用域
   <template slot-scope="todo"> 
   <template v-slot="todo"> // 具名-作用域
   <template slot-scope="todo" slot='header'> 
   <template #header="todo"> 
   

6. v-slot属性只能在<template>上使用。

后备内容 和 匿名插槽（单个插槽/默认插槽）

后备内容

当组件内部没有内容时，组件模板中的slot标签的内容会被渲染。有则渲染组件内部的内容。

  // home 组件模板<template><div class='home'><p>我是home 组件</p><slot><h3>没传内容</h3></slot></div></template>// 组件内部<h2>组件内没有内容：</h2><home></home><h2>组件内有内容：</h2><home> <h3>我有内容了</h3></home>// 渲染结果<h2>组件内没有内容：</h2> <div class="home"><p>我是home 组件</p> <h3>没传内容</h3></div> <h2>组件内有内容：</h2><div class="home"><p>我是home 组件</p><h3>我有内容了</h3></div> 

单个插槽（ 匿名插槽/默认插槽）

1. 单个插槽一般都是匿名的，无name属性。

注意: 组件模板中使用多个 slot 标签占位后，在组件内部的内容有多少个slot就会重复多少次。(多写几个默认插槽，怕是铁憨憨)

  // home 组件模板<template><div class='home'><p>我是home 组件</p><slot><h3>没传内容</h3></slot><slot></slot><slot></slot></div></template>//组件内部<home><p>铁憨憨</p></home>//渲染结果<div class="home"><p>我是home 组件</p> <p>铁憨憨</p><p>铁憨憨</p><p>铁憨憨</p></div>

2. 单个插槽当然也可以给他命名，默认未命名情况下，Vue2.6+版本默认为 v-slot:default或简写#default。也可以省略default直接写v-slot。如果写写上#default或者 v-slot,单个插槽变成了具名插槽。

   // home 组件模板<template><div class='home'><p>我是home 组件</p><slot>         <!-- slot的name=default 写不写都一样 --><h3>没传内容</h3></slot></div></template>
   //
   <home ><p>我是 slot </p><template v-slot><p>我变成具名插槽了</p></template>
   </home>// 渲染结果
   <div class="home"><p>我是home 组件</p> <p>我变成具名插槽了</p>
   </div>
   

具名插槽

• 匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以有N个。但是 name 和 v-slot:‘插槽名’ 是一一对应的。

• 具名的作用,也就是指向到那个位置展示。也和在组件内部的书写顺序无关。

• 在向具名插槽提供内容的时候，我们要在一个 <template>标签上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

//home组件
<div class='home'><p>我是home 组件</p><slot name=header></slot><slot name='bar'></slot>
</div>//内部
<homse ><p>我是 default </p><template v-slot:header><p>v-slot:header 我变成具名插槽了</p></template><template #bar><p>#header 我变成具名插槽了</p></template>
</homes>//渲染结果
<div class="home"><p>我是home 组件</p> <p>v-slot:header 我变成具名插槽了</p> <p>#bar 我变成具名插槽了</p>
</div>

作用域插槽(带数据的插槽)

• 其实就是获取父组件的内部数据。不用像父子组件通信一样的麻烦。

• 绑定在 元素上的 属性 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字(注意: v-slot 定义的名字 可以和 prop 的名字不同,但是结构的时候需要重命名 prop) 。并且 slot 标签上返回的属性值，是以一个对象的形式保存起来。

    <template v-slot='res'><h2>在 slot 上面绑定属性，得到父组件的数据，通过v-slot获取</h2><h4>{{res}}</h4></template>//<p>我是home 组件</p> <h2>在 slot 上面绑定属性，得到父组件的数据，通过v-slot获取</h2> <h4>{"res": {"name": "作用域插槽","type": "Object"}}</h4>
  

• 默认插槽 携带数据，会被当作具名插槽使用，slot 的 name 默认为 default。只会渲染 最后一个 <template #default='res'>标签。

• 具名插槽带数据，v-slot:bar='res'简写为 #bar='res'。

  <template ><h2>得到数据</h2><h4>{{res}}</h4>
  </template>
  <template #bar='res'><h2>具名插槽得到数据</h2><h4>{{res}}</h4>
  </template>//
  <h2>具名插槽得到数据</h2>
  <h4>
  {"res": {"name": "作用域插槽","type": "Object"}
  }
  </h4> 
  

• 解构Prop，由于返回的是一个对象，那就可以解构。可以使接受的数据变得更简洁。

  <template #prop='{res}'><h2>解构插槽 Prop</h2><h4>{{res}}</h4>
  </template>//
  <h2>解构插槽 Prop</h2>
  <h4>
  {"name": "作用域插槽","type": "Object"
  }
  </h4>
  

• 尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：v-slot={"user": person}。其实就是解构Prop。

  <template #other='{"res": other}'><h2>prop 重命名 </h2><h4>{{other}}</h4>
  </template>//
  <h2>prop 重命名 </h2> 
  <h4>
  {"name": "作用域插槽","type": "Object"
  }
  </h4>
  

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

  <template #uf='{uf = {arr:[1]}}'><h2>用于插槽 prop 是 undefined 的情形：</h2><h4>{{uf}}</h4>
  </template>//
  <h2>prop 重命名1 </h2> 
  <h4>
  {"arr": [1]
  }
  </h4>
  

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

  <home v-slot='{res}'>
  {{res.name}}
  </home>
  

• 代码

<tempalte><div class='home'><p>我是home 组件</p><slot :res=res ></slot><slot :res=res name=bar></slot><slot :res=res name=prop></slot><slot :res=res name=other></slot><slot :uf=uf name=uf></slot></div>
</tempalte>
export default {name:"home",data() {return {"res":{"name": 作用域插槽,"type": "Object",},"uf": undefined,}},
}

转载及引用

官方插槽文档

对Vue插槽slot的理解

深入理解vue中的slot与slot-scope

如何理解Vue.js的组件中的slot?

Vue 插槽 & 高复用组件

[Vue] slot详解，slot、slot-scope和v-slot