Vue CLI  propsの使い方

#propsについて

具体的な使用方法がイメージしづらかったため、学習内容の備忘録
参考記事：https://mebee.info/2020/02/24/post-5009/


結果
![スクリーンショット 2020-08-20 6.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/227c29bc-d76b-dd78-11db-55764f6db59a.png)

サイトのトップページのテキスト部分上下をpropsにて変更している（使用しているのは同一コンポーネント）

####App.vue

```javascript

<template>
  <v-app>
   <Header/>
    <router-view/>
   <!-- <Top/>
   <Index/>
   <TopSlide/> -->
   <Footer/>
  </v-app>
</template>
<style scoped>
  v-container{
    padding-bottom: 0;
  }
</style>

<script>
import Header from './views/Header';
import Footer from './views/Footer';
// import Top from './views/Top';
// import Index from './views/Index';
// import TopSlide from './views/TopSlide';

export default {
  name: 'App',

  components: {
    Header,
    Footer,
    // Top,
    // Index,
    // TopSlide,
  },

  data: () => ({
    //
  }),
};
</script>

```

App.vueでルーターリンクを設定

####TopPage.vue（親コンポーネント：このコンポーネントで今回使用するpropsを呼び出す）

```javascript

<template>
  <v-container>
    <v-row justify="center" align="center">
      <v-col cols="12">
      <TopForm/>
      <IndexForm
       title= "本サイトについて"
    subTitle= "FEATURE"
    text1= "外出自粛が広く実施される昨今"
    text2= "「Life Flower」は、改めて家庭で花を楽しむ体験を提案します"
    text3= " 皆さんの生活に彩りを添える花を１輪飾ってみませんか。"
    text4= "あなたの街の素敵なお花屋さんと花々を楽しむ体験を"
    text5= "私たちは提案します。"
      
      
      
      />
      <TopSlideForm/>
      <IndexForm
        :title= "test[0].title"
    :subTitle= "test[0].subTitle"
    :text1= "test[0].text1"
    :text2= "test[0].text2"
    :text3= "test[0].text3"
    :text4= "test[0].text4"
    :text5= "test[0].text5"
      />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import TopForm from '../components/TopForm'
import IndexForm from '../components/IndexForm'
import TopSlideForm from '../components/TopSlideForm'

export default{
    name:'TopSlide',//ここの名前は任意設定
    
    components:{
        TopForm,//ここの記載をtemplateで呼び出す際に使う
        IndexForm,//ここの記載をtemplateで呼び出す際に使う
        TopSlideForm,//ここの記載をtemplateで呼び出す際に使う
        
    },
  data: () => {
    return {      
      test: [
        { title: '使い方',
         subTitle: 'あなたのお気に入りのお店をみつけよう',
          text1: '現在地や任意の場所を指定して',
          text2: '検索をスタート', 
          text3: 'あなたの街の素敵なお店が見つかります。', 
          text4: '気に入ったお店をフォローして', 
          text5: '毎日投稿をチェックしましょう', },
          //参考サイト：https://mebee.info/2020/02/24/post-5009/
      ],
    };
  },    
}

</script>
```

TopPage.vueで子コンポーネントであるIndexForm.vueを呼び出す。
呼び出す際にpropsを使用し子コンポーネント で{{}}マスタッシュによってpropsを指定している部分を設定する。
importしてコンポーネントを使用できるようにし、以下の通り呼び出す。
呼び出し方法は複数ある。
今回はIndexFormを2つ呼び出している。
１つはタグに直接指定する方法
２つはscriptタグ内のdataにバインド（bind:)して呼び出している。


####IndexForm.vue

```javascript

<template>
  <v-container>
    <v-row>
        <v-col class='feature'>
        <h3>{{title}}</h3>
        <span>{{subTitle}}</span>
        <div>{{text1}}<br>
        {{text2}}<br>
       {{text3}}<br>
        {{text4}}<br>
       {{text5}}</div>
        </v-col>
    </v-row>



  </v-container>
</template>

<style scoped>
    .feature{
        text-align: center;
    }
</style>

<script>
export default {
   name: "IndexForm",
  props: {
    title: String,
    subTitle: String,
    text1: String,
    text2: String,
    text3: String,
    text4: String,
    text5: String,
  },
  
}
</script>
```

propsを設定する箇所に{{}}マスタッシュを使用し、scriptタグ内でpropsを設定。
親コンポーネントでpropsで設定した内容を呼び出し使用できるようになる。