让你的组件千变万化，Vue slot 剖玄析微

（一）前言

Vue 代码中的 slot 是什么，简单来说就是插槽。 元素作为组件模板之中的内容分发插槽，传入内容后 元素自身将被替换。

看了上面这句官方解释，可能一样不知道 slot 指的是什么，那么就来看看在 Vue 中，什么时候你需要用到 slot 。

举例：一个组件的展示层你需要做到大体结构固定，但其内的部分结构可变，样式表现不固定。例如 Button 中是否显示 icon，或者 Modal 框的中间内容展示区域的变化等，要通过子组件自己实现是不可能的。组件并不直接支持 HTML DOM 结构的传递，此时就可以通过使用 slot 作为 HTML 结构的传递入口来解决问题。

（二）v-slot 用法

在 2.6.0 版本中，Vue 为具名插槽和作用域插槽引入了一个新的统一的语法 （即 指令）。它取代了 slot 和 slot-scope 这两个目前已被废弃、尚未移除，仍在 文档中 的特性。

使用方法可以分为三类： 默认插槽 、 具名插槽 以及 作用域插槽 。

◎ 默认插槽

子组件编写：在组件中添加 元素，来确定渲染的位置。

// 子组件
  
    

      
      

        
        默认值
      
    
  

父组件编写：任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。当子组件只有默认插槽时， 标签可以直接用在组件上，也就是独占默认插槽的写法

// 父组件

  

    
    
      任意内容
      内容
      中间内容
      <!-- 但如果你定义了 default 之后，其他内容就不会出现了，原理同上，不能重复定义 -->
    

    
    
      当只有默认插槽时，此为独占默认插槽的缩写

      如果组件中有其他具名插槽，这么写会报错

      slotProps 取的是，子组件标签 slot 上属性数据的集合
    
  

渲染结果

◎ 具名插槽

子组件编写：当需要使用多个插槽时，为 元素添加 name 属性，来区分不同的插槽，当不填写 name 时，默认为 default 默认插槽。

// 子组件
  
    

      
      
        
      
      
    
  

父组件编写： 标签中添加 v-slot:xxx 或者 #xxx 属性的内容， # 代表插槽的缩写。

// 父组件

  

    
    
      
        导航
      
      页脚（具名插槽的缩写#）
      
        
        v-slot只会添加在一个 template 上面
      
    
  

渲染结果

◎ 作用域插槽

子组件编写：有时让父组件能访问到子组件中的数据是很有用的，我们可以将绑定在 元素上的特性称为 插槽 Prop ，当然也可以传递一些 Function 。

// 子组件
  
    

      
      
    
  

  
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '测试title',
          name: '测试name'
        }
      };
    },
    methods:{
      testClick(){
          // 子组件通用方法，可传递给父组件复用
        alert('123');
      }
    }
  };
  

父组件编写：被绑定的属性的集合对象，在父元素中会被 v-slot:xxx="slotProps" 或者 #xxx="slotProps" 接收，xxx 代表具名插槽的 name ，slotProps 为子组件传递的数据对象，可以重命名。

// 父组件

  

    
    
      
        {{slotProps.user.title}}
        点我
      
      
        {{user.title}}

        此为解构插槽prop

        
        点我
      
    
  



import Child from './component/child.vue';
export default {
  name: 'demo',
  components: {
    Child
  },
};

渲染结果

◎ 其他拓展

v-slot="{ user: person }"
v-slot="{ user = { name: 'Guest' } }"
v-slot:[dynamicSlotName]

◎ 注意事项

• v-slot 只能用在 template 上面，或者是独占默认插槽的写法。

• 父组件引用时 ，重复定义了 v-slot 的 name 后只会加载最后一个定义的插槽内容。

• 当子组件只有默认插槽时，才可以使用独占默认插槽的缩写语法，只要出现多个插槽，必须使用完整的基于 template 的语法。

（三）slot 以及 slot-scope 的用法

介绍完 v-slot 的基本用法，这里我们也顺带介绍一下之前的 slot 和 slot-scope 的用法以及区别。

◎ 子组件编写

子组件的编写方式没什么区别，下面是一个集合

// 子组件
  
    

      
      

        默认值
      

      
      
        
      

      
      
    
  

  
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '测试title',
          name: '测试name'
        }
      };
    }
  };
  

◎ 父组件编写

• 具名插槽：直接使用 slot 属性，传值为子组件插槽的 name 属性。

• 作用域插槽：通过 slot-scope 属性来接受子组件传入的属性集合，其他用法一致。

// 父组件

  

    
      
      
默认插槽
 

      
      
具名插槽
      
具名插槽2

      
      

        {{slotProps.user.title}}
      
    
  



import Child from './component/child.vue';
export default {
  name: 'demo',
  components: {
    Child
  },
};

最终渲染

◎ 需要注意

• 不同于 v-slot 的是， slot 中同名可以重复定义多次。

• slot 可以直接定义在子组件上。

• v3.0 版本后不可使用 slot ，建议直接使用 v-slot 。

（四）总结

function