Vue.jsのpropsについて

Vue.jsのpropsは、親コンポーネントから子コンポーネントにデータを受け渡すための仕組みです。親コンポーネントから子コンポーネントに情報を渡すために使用されます。propsは子コンポーネント内で受け取り、その値を利用することができます。

以下は、Vue.jsでpropsを使用する方法の例です。

親コンポーネントから子コンポーネントにpropsを渡す方法

<template>
  <div>
    <!-- 子コンポーネントにmessageというpropsを渡す -->
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

子コンポーネントでpropsを受け取る方法：

<template>
  <div>
    <!-- propsで受け取ったmessageを表示する -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String // propsの型を指定することもできる
  }
};
</script>

上記の例では、親コンポーネントでchild-componentというタグを使用して子コンポーネントを呼び出し、parentMessageというデータをmessageという名前のpropsとして子コンポーネントに渡しています。子コンポーネントでは、propsオプション内でmessageを定義して受け取り、その値をUIに表示しています。

propsを使用することで、Vue.jsのコンポーネントを再利用可能にし、親子関係のコンポーネント間でデータを簡単にやり取りすることができます。