Chapter 08

コンポーネント（カルーセル）を追加

2022.09.29に更新

このチャプターの目次

Props

Cicleカルーセルをコンポーネントで追加します。
src/components/CarouselComp.vueを新規作成しCicleカルーセルのソースコードをコピペします。TEMPLATEとSCRIPTがあります。height="400"だと大きいのでheight="200"に変更します。

src/components/CarouselComp.vue

<template>
  <v-carousel
    cycle
    height="200"
    hide-delimiter-background
    show-arrows-on-hover
  >
    <v-carousel-item
      v-for="(slide, i) in slides"
      :key="i"
    >
      <v-sheet
        :color="colors[i]"
        height="100%"
      >
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <div class="text-h2">
            {{ slide }} Slide
          </div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
</template>
<script>
  export default {
    data () {
      return {
        colors: [
          'indigo',
          'warning',
          'pink darken-2',
          'red lighten-1',
          'deep-purple accent-4',
        ],
        slides: [
          'First',
          'Second',
          'Third',
          'Fourth',
          'Fifth',
        ],
      }
    },
  }
</script>

FrontEnd.vueの<script></script>を以下のように変更するとコンポーネントが読み込めます。（読み込んだだけでtemplateにタグを書かないと使えません）
import CCalouse from './CarouselComp.vue'でファイルを読み込みCCalouseというコンポーネント名を付けます。components: { CCalouse　}コンポーネントとして登録します。

src/components/FrontEnd.vue

<script>
import CCalouse from './CarouselComp.vue'
  export default {
      components: {
          CCalouse
      },
    data: () => ({ drawer: null }),
  }
</script>

使用するときはタグとしてコンポーネント名CCalouseを書けば使えます。以下の場所に<CCalouse></CCalouse>を追加してください。

src/components/FrontEnd.vue

	略
        <v-container>
            <CCalouse></CCalouse>
            <v-row>
	略

Props

カルーセルにメッセージを表示させます。ただ表示するのではなく親から子へデータを渡して表示させてみます。
親（FrontEnd.vue）から子(CarouselComp.vue)へデータを渡すときはpropsを使います。子のpropsで変数mojiを宣言します。親のタグで、その変数に代入することで親から子へデータを渡すことができます。
表示は{{変数}}。以下の場所に<p>{{moji}}</p>を追加してください。

src/components/CarouselComp.vue

          <div class="text-h2">
            {{ slide }} Slide
            <p>{{moji}}</p>
          </div>

子のscriptで変数の宣言。以下の場所にprops: ["moji"],を追加してください。

src/components/CarouselComp.vue

<script>
  export default {
    props: ["moji"],
    data () {

親で変数に代入

src/components/FrontEnd.vue

　　略
        <v-container>
            <CCalouse moji="親から子へデータ送信"></CCalouse>
            <v-row>
    略

動作確認するとカルーセルに表示されます。