Vue slot 筆記

最近作公司的案子開始使用Vue, 看到其他部門寫的table共用模組裡面也一個特殊的用法:

<template #column:dataId="{ data }">
  <div></div>
</template>

一般使用slot都只會給它name，但到底是怎麼給定”:”後面的dataId呢? 原來是使用named slot加上slot props:

<slot :name="column:dataId" v-bind="{ data }">
  <div></div>
</slot>

還可以再定義slot的時候，使用string template的寫法將slot name寫成動態的如:

<slot :name="`column:${dynamicName}`" v-bind="{ data }">
  <div></div>
</slot>