2019/01/09 VueでTabComponent試作

TabComponentってつくるの難しいよなーと思っていたのと、でも何度か実装してきたしそろそろ共通化したい(汎用化したい)なーと思うようになってきたので腕試し的な感じで試したみた。あーでもないこーでもないって試してたら3時間近くかかった気がする。

tabの中身をslot化する前提として、このslotではめ込まれるものに対して「Tabを切り替える」「Tabを表示する/非表示にする」みたいな共通の振る舞いをつけるのが厄介だった。気持ち的には

<slot name="nav" @click="changeTab"></slot>

とか、

<template v-for="tabContent in $slots.default">
  <component v-bind:is="tabContent" />
</template>

とかしたかったけど、当然無理なわけで。

結局slotではめ込まれる要素に対して動的な処理をしたり、振る舞いを付加したりするには、Render関数を使ってJS上で処理するしかなかった(たぶん)。

ちなみにRenderlessComponentというパターンがあるらしいけど、エラーになって実用できなかった。 https://adamwathan.me/renderless-components-in-vuejs/

// renderless component
export default {
  render() {
    return this.$scopedSlots.default({});
  }
}

aloerina01 / til