Vue.jsにおけるPropsの定義方法と使用例

2024-02-09 15:52 Vue.js props コンポーネント

Propsの定義方法:

  1. 親コンポーネントでPropsを定義します。Propsはコンポーネントのプロパティとして宣言され、子コンポーネントに渡されます。例えば、以下のようにPropsを定義します:
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});
  1. 子コンポーネントでPropsを使用します。Propsは子コンポーネント内で使用するために、v-bindディレクティブを使用して親コンポーネントから受け取ります。以下は、Propsを使用する子コンポーネントの例です:
<template>
  <child-component v-bind:message="parentMessage"></child-component>
</template>
<script>
export default {
  data() {
    return {
      parentMessage: '親からのメッセージ'
    };
  }
};
</script>

この例では、parentMessageという名前のプロパティを持つ親コンポーネントから、messageというPropsを子コンポーネントに渡しています。

Propsの使用例: Propsを使用することで、親コンポーネントからデータを子コンポーネントに渡すことができます。これにより、コンポーネント間でデータの受け渡しや共有が簡単になります。以下にPropsの使用例を示します。

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});
<template>
  <child-component v-bind:message="parentMessage"></child-component>
</template>
<script>
export default {
  data() {
    return {
      parentMessage: '親からのメッセージ'
    };
  }
};
</script>

この例では、親コンポーネントで定義されたparentMessageの値が子コンポーネント内で表示されます。

以上が、Vue.jsにおけるPropsの定義方法と使用例です。Propsを利用することで、柔軟なデータの受け渡しが可能となり、コンポーネント間のコミュニケーションを簡素化することができます。