Vue.jsのコンポーネント　テーブルにしたい

具体的なコードを書いていません。
根本的にprops $emit slotなどの技術をどう使えばいいか質問したいです。

vue.jsでテーブルのコンポーネントを作りたいです。

title
text1 value1
text2 value2
text3 value3

↑このようなテーブルのコンポーネントを複数作成希望

複数作り各々違うデータを持たせたいのですが、データの数が違います。
（textとvalueの数が２、６と変わっても対応させたい。）

今まではpropsを使ってデータを書き換えたりはしてきました。
が、今回テーブルコンポーネントでv-forを使ったり試行していると行き詰まってしまいました。

どんな記述方法でもいいので、vueのコンポーネントについて熟知されている方
ご教授いただけないでしょうか？

また、自分の質問の質問が不足でしたらご指摘ください。

行動規範の内容に同意します

回答1件

ベストアンサー

今回もpropsを利用されるのが良いと思います。
試しに以下のように作成してみました。(動作確認済み)

呼び出し元 ※:itemsに渡す値は実際は変数に詰める想定ですが、今回はわかりやすく直書きしました。

Vue
1<my-table
2  title="title"
3  :items="[
4    { text: 'text1', value: 'value1' },
5    { text: 'text2', value: 'value2' },
6    { text: 'text3', value: 'value3' }
7  ]"
8/>

コンポーネント - MyTable.vue

Vue
1<template>
2  <v-container>
3    <div>
4      {{ title }}
5    </div>
6    <table>
7      <tr v-for="(item, index) in items" :key="index">
8        <td>{{ item.text }}</td>
9        <td>{{ item.value }}</td>
10      </tr>
11    </table>
12  </v-container>
13</template>
14
15<script>
16export default {
17  props: ['title', 'items']
18};
19</script>

props, $emit, slot の使う場面についてですが、自分の認識は以下です。

props - 今回のようにコンポーネントでtitleやitemsといった属性を設定し値を渡すのに利用します。
$emit - コンポーネント内のイベント時に呼び出したい関数がある場合等に利用します。
例えば、コンポーネント内にボタンを設置し、ボタンを押下した際に、呼び出し元Aでは画面遷移・呼び出し元Bでは計算処理をしたい等
slot - コンポーネント内のslotタグに呼び出し元で記述した内容を表示するのに利用します。
例えば、モーダルコンポーネントで、呼び出し元Aではモーダルにテキストメッセージを表示、呼び出し元Bではモーダルにカレンダーを表示する等

誤りあるかもしれませんが、ご参考になれば幸いです。

投稿2021/01/20 18:24