简单理解Vue中的作用域插槽

理解方式一： 和插槽相对

**插槽**的作用是：父组件提供内容，在子组件中展示。

**作用域插槽**：子组件提供内容（数据），在父组件中展示。

### 这里说的是表象，本质问题还是下面要说到的作用域。

        

理解方式二： 延伸了子组件的作用域

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

看看官方的例子---

定义一个子组件，有个具名插槽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>