千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

理解方式一：

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

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

理解方式二

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

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>

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