理解方式一：

插槽的作用是：父組件提供內(nèi)容，在子組件中展示。

作用域插槽：子組件提供內(nèi)容（數(shù)據(jù)），在父組件中展示。

理解方式二

組件有編譯作用域---父級模板里的所有內(nèi)容都是在父級作用域中編譯的，子模板里的所有內(nèi)容都是在子作用域中編譯的。

const sonCom = {
      template: `
      <div>
        <slot name="son" :user="user">子組件數(shù)據(jù)：{{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數(shù)據(jù)。

（注：v-slot指令是Vue2.6之后，作用域插槽的新語法，舊語法現(xiàn)在還保留，但3.0之后會移除。推薦新語法，簡便寫法是#son=“{user}”）

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

從結果來看，可以認為作用域插槽延伸了子組件數(shù)據(jù)的作用范圍，這樣想，作用域插槽這個名字就不那么抽象了，而且顧名思義。