作用域插槽---乍听起来，是一个很抽象的概念。看了几遍官方文档，有了一些粗浅的认识，觉得这个名字取得还挺恰当的，因为它在一定范围内，延伸了子组件的作用域。​

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

看看官方的例子---

定义一个子组件，有个具名插槽son，并且通过属性绑定子组件的数据user。

const sonCom = {
      template: `
      <div>
        <slot name="son" :user="user">子组件数据：{{user.firstName}}</slot>
      </div>
      `,
      data() {
        return {
          user: {
            firstName: '三',
            lastName: '张'
          }
        }
      }
    }

父组件调用子组件时，假设不想展示firstName了，想展示lastName，按照下面这样写是不行的。

<div id="app">
    <son-com>{{user.lastName}}</son-com>
  </div>

因为user是在子组件的作用域中，父组件无法访问。

此时通过作用域插槽，可以做到。如下代码，通过v-slot指定绑定具名插槽son，通过自定义的scope接收子组件的user数据。

（注：v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法现在还保留，但3.0之后会移除。推荐新语法，简便写法是#son=“{user}”）

<div id="app">
    <son-com v-slot:son="scope">{{scope.user.lastName}}</son-com>
  </div>

从结果来看，可以认为作用域插槽延伸了子组件数据的作用范围，这样想，作用域插槽这个名字就不那么抽象了，而且顾名思义。

使用场景

例如，在使用elementUI组件库的表格组件时，表格的编辑和删除操作要用到作用域插槽。因为一个表格组件，就是当前组件的子组件。

此时我们通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑展示、删除的操作。

并且，我们知道Vue是单向数据流。传递给子组件的数据，若要修改，应在父组件中处理。而我们通过作用域插槽，正好可以在父组件中修改数据，方便安全。