Vueでpropsとslotを使って再利用コンポーネントを開発する話

# コンポーネント
<template>
  <div>
    <h5>{{ title }}</h5>
    <table>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
      <tr v-for="(row, i) in data" :key="i">
        <td v-for="(column, j) in row" :key="`${i}-${j}`">{{ column }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    title,
    headers,
    data
  },
}
</script>

# コンポーネントを呼び出す親
<template>
  <DataTable :title="title" :headers="headers" :data="data"/>
</template>

<script>
// コンポーネントのimport文を省略します
export default {
  data() {
    return {
      title: 'Title',
      headers: ['C1', 'C2', 'C3', 'C4'],
      data: [
        {
          c1: `R1-C1`,
          c2: `R1-C2`,
          c3: `R1-C3`,
          c4: `R1-C4`,
        },
        {
          c1: `R2-C1`,
          c2: `R2-C2`,
          c3: `R2-C3`,
          c4: `R2-C4`,
        },
      ]
    }
  },
}
</script>

<script>
export default {
  props: {
    title: {
      // String型のprop。二つ以上の型があり得る場合は[String, Number]などで書きます
      type: String,

      // このpropは必ず呼び出し元から渡してもらう必要があります
      required: true,

      // propのバリデーションチェック。Booleanを返すことで結果を判定します
      validator(value) {
        return value.startsWith('Title')
      }
    },
  },
}
</script>

<template>
  <div>
    <h5>{{ title }}</h5>
    <table>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
      <tr v-for="(row, i) in data" :key="i">
        <!-- 受け取ったスタイルを判定する関数でクラス情報を取得 -->
        <td
          v-for="(value, j) in row"
          :class="cellStyle(value)"
          :key="`${i}-${j}`"
        >
          {{ value }}
        </td>
        <!-- ボタンがある場合はボタンの列を別途用意 -->
        <td v-if="buttons.length > 0">
          <button
            v-for="button in buttons"
            :class="button.class"
            :disabled="button.disabled(row)"
            @click="button.onClick(row)"
            :key="`${button}-${i}`"
          >
            {{ button.text }}
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    title,
    headers,
    data,
    // セルのスタイルを決めるロジックをpropsとして受け取る
    cellStyle,
    // ボタン情報をpropとして受け取る
    buttons,
  },
}
</script>

<template>
  <!-- クラス情報を返す関数とbuttonsに関する情報をpropsとして渡す -->
  <DataTable :title="title" :headers="headers" :data="data" :cell-style="cellStyle()" :buttons="buttons" />
</template>

<script>
export default {
  data() {
    return {
      // その他のdata情報を省略
      buttons: [
        {
          text: '編集',
          class: 'btn-primary',
          disabled: (rowData) => {
            // ボタンをdisabledにするかどうかの判断ロジック
          },
          onClick: (rowData) => {
            // ボタンの押下後ロジック
          },
        },
        {
          text: '削除',
          class: 'btn-danger',
          disabled: (rowData) => {
            // ボタンをdisabledにするかどうかの判断ロジック
          },
          onClick: (rowData) => {
            // ボタンの押下後ロジック
          },
        },
      ],
    }
  },
  methods: {
    cellStyle() {
      return (val) => {
        // 必要なスタイルクラス情報を返すロジック
      }
    }
  }
}
</script>

<template>
  <div>
    <!-- default slot -->
    <slot />
    <!-- tableというslot -->
    <slot name="table" />
  </div>
</template>

<template>
  <DataTable>
    <!-- コンポーネントの中にhtmlコードを書くと、自動的にコンポーネント側で宣言されたslotに当てはめます -->

    <!-- 特にtemplateで囲まなければdefaultのslotに当てはめます -->
    <h5>Title</h5>

    <!-- tableというslotに当てはめます -->
    <template #table>
      <table>
        <tr>
          <th v-for="header in headers" :keys="header">{{ header }}</th>
        </tr>
        <tr v-for="(row, i) in data" :keys="`row-${i}`">
          <td
            v-for="(column, j) in row"
            :class="{
              'font-italic': italicFont(column),
              'font-weight-bold': boldFont(column)
            }"
            :key="`row-${i}-col-${j}`"
          >
            {{ column }}
          </td>
          <td>
            <button :disabled="editDisabled(column.c1)" @click="edit(column.c1)">編集</button>
            <button :disabled="destroyDisabled(column.c1)" @click="click(column.c1)">削除</button>
          </td>
        </tr>
      </table>
    </template>
  </DataTable>
</template>

<script>
export default {
  // data情報を省略
  methods: {
    edit(id) {
      // その行のデータを編集するロジック
    },
    destroy(id) {
      // その行のデータを削除するロジック
    },
    italicFont(val) {
      // 斜体にする判断ロジック
    },
    boldFont(val) {
      // 太文字にする判断ロジック
    },
    editDisabled(id) {
      // 編集ボタンをdisabledする判断ロジック
    },
    destroyDisabled(id) {
      // 削除ボタンをdisabledする判断ロジック
    }
  },
}
</script>

<template>
  <DataTable>
    <!-- h5ではなく、h1を利用 -->
    <h1>Title</h1>

    <template #table>
      <!-- <table>, <tr>や<th>を利用せず<div>を利用 -->
      <div>
        <div>
          <div v-for="header in headers" :keys="header">{{ header }}</div>
          <div></div>
        </div>
        <div v-for="(row, i) in data" :keys="`row-${i}`">
          <div v-for="(column, j) in row" :key="`row-${i}-col-${j}`">
            {{ column }}
          </div>
          <div>
            <button :disabled="editDisabled(column.c1)" @click="edit(column.c1)">編集</button>
            <button :disabled="destroyDisabled(column.c1)" @click="click(column.c1)">削除</button>
          </div>
        </div>
      </div>
    </template>
  </DataTable>
</template>

<template>
  <div>
    <!-- 必ずテキストを<h5>に入るようにpropsを利用 -->
    <h5>{{ title }}</h5>

    <!-- 必ず<table>タグを利用 -->
    <table>
      <tr>
        <!-- header情報をpropsで渡すことで、必ず<th>を利用する -->
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>

      <!-- 渡されたデータの行数に応じて動的にslotを生成 -->
      <!-- v-bindを利用して、呼び出し元のtemplateにデータを渡す -->
      <slot name="table-item" v-for="row in data" v-bind="row" />
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title,
      headers,
      data
    }
  }
}
</script>

<template>
  <!-- タイトルとヘッダーはpropsで渡す -->
  <DataTable title="Title" :headers="headers" :data="data">

    <!-- コンポーネント側のv-bindされたデータを受け取る -->
    <template #table-item="row">

      <!-- 行のデータを受け取り、表示方法を定義 -->
      <tr>
        <td v-for="(column, i) in row" :key="`col-${i}`">
          {{ column }}
        </td>
        <td>
          <button :disabled="editDisabled(column.c1)" @click="edit(column.c1)">編集</button>
          <button :disabled="destroyDisabled(column.c1)" @click="click(column.c1)">削除</button>
        </td>
      </tr>
    </template>
  </DataTable>
</template>

<template>
  <DataTable title="Title" :headers="headers" :data="data">
    <template #table-item="row">

      <!-- <tr>ではない場合は何かしらの方法で実装者にお知らせするなど -->
      <div>
        <td v-for="(column, i) in row" :key="`col-${i}`">
          {{ column }}
        </td>
      </div>
    </template>
  </DataTable>
</template>