作用域插槽slot的使用場景 -- vue組件通信系列

語言: CN / TW / HK

vue 組件的數據通信方式很多,本篇着重講作用域插槽slot

slot的基本用法,這裏不再贅述。
本篇強調的是,怎麼通過slot來實現通信。準備來説,是在父組件裏顯示子組件給slot暴露的數據。

因為vue版本的原因,父組件使用slot的形式不一樣,2.6.0以上使用新版本slot,以下則是舊版本。

新版本怎麼使用作用域插槽

先寫個demo:

父組件:


<template lang="pug">
div
  list-item
    template(v-slot:header="headerData")
      //- { "title": "ListItem的header", "desc": "header描述" }
      div {{headerData}}

    //- v-slot:可以簡寫為#
    template(#default="defaultData")
      //- { "title": "ListItem的default", "desc": "default描述" }
      div {{defaultData}}

    //- 可以解構使用
    template(v-slot:footer="{title,desc}")
      //- ListItem的footer
      div {{title}}
      //- footer描述
      div {{desc}}
</template>
複製代碼

子組件:

<template lang="pug">
div
  slot(name="header" title="ListItem的header" desc="header描述")
  //- name是default的話,可以省略name屬性
  slot(name="default" title="ListItem的default" desc="default描述")
  slot(name="footer" title="ListItem的footer" desc="footer描述")
</template>

複製代碼

總結下:

  • 子組件,在內部將數據以屬性的形式放在slot標籤上
  • 父組件,通過template(v-slot:header="headerData")獲取數據,數據是對象形式的
  • v-slot:可以簡寫成#
  • 數據可以解構
  • 必須配合template標籤

舊版本怎麼使用作用域插槽

依舊先寫個demo:

父組件:

<template lang="pug">
div
  list-item
    //- { "title": "ListItem的header", "desc": "header描述" }
    div(slot="header" slot-scope="headerData") {{headerData}}
    div(slot="header" slot-scope="headerData") {{headerData}}

    //- slot="default" 可以省略
    //- { "title": "ListItem的default", "desc": "default描述" }
    div(slot-scope="defaultData") {{defaultData}}

    template(slot="footer" slot-scope="{title,desc}")
      div {{title}}
      div {{desc}}
</template>
複製代碼

子組件,沒變化

總結下:

  • 子組件,在內部將數據以屬性的形式放在slot標籤上
  • 父組件,通過div(slot="header" slot-scope="headerData")獲取數據,數據是對象形式的
  • 數據可以解構

第三方組件,使用作用域插槽

在使用element-uiel-table的時候,需要使用當前行的數據,就可以藉助作用域

<template lang="pug">
el-table(...)
  el-table-column
    template(#default="scope")
      router-link(:to="scope.href") 觀看視頻
  //- 老版
    el-table-column
      router-link(slot-scope="scope" :to="scope.href") 觀看視頻
</template>
複製代碼