自己紹介

初めまして！@satoseriと申します
今年新卒として、株式会社エル・ティー・エスに入社し、エンジニアとして自社サービスの開発運用を担当しています。
フロントエンドのフレームワークの一つとして活用されているVue.jsの基本的な機能であるPropsに関して、復習も兼ねてまとめてみました。拙い文章ですが、最後まで読んでいただけると幸いです。

Propsとは

propsはコンポーネントに登録できるカスタム属性のことです。
親コンポーネントから子コンポーネントにデータを渡すための仕組みです。

親から子コンポーネントへのデータの渡し方

子コンポーネントでmessageプロパティとして定義されている文字列型の値を親コンポーネントから子コンポーネントへ受け渡しています。

ChildComponent.vue

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
  setup(props) {
    return {
      message: props.message,
    };
  },
};
</script>

ParentComponent.vue

<template>
  <div>
    <h1>親コンポーネント</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const parentMessage = ref('親からのメッセージ');
    return { parentMessage };
  },
};
</script>

Propsで主に定義されるもの

1 type: テキストや数値などのデータの型を設定

propsにはどのような値が入るかtypeによってチェックを行う

<script>
defineProps({
  name: {
    type:String,
  },
});
</script>

2 default：デフォルト値の設定

<script>
defineProps({
  name: {
    type: String,
    default: '山田花子',
  },
});
</script>

3 Required：必須なpropsかを設定

<script>
defineProps({
  name: {
    type: String,
    required: ture, //tureの場合は必須である
  },
});
</script>

まとめ

propsを定義することで異なるコンポーネント間でデータを簡単に受け渡すことができます。
propsを活用することで、渡されるデータの型が期待通りかどうかの検証や同じコンポーネントを異なる場所で異なるデータとともに使用でき、コードの冗長性の減少や再利用性の向上につながります。

vueをこれから始めるどなたかの参考になれば幸いです。
最後まで見ていただきありがとうございました！

引用・参照