Vue.jsでのpropsについて

Vue.jsでの props は、親コンポーネントから子コンポーネントにデータを渡すための仕組みです。親コンポーネントから子コンポーネントにデータを渡す際に使用します。これにより、コンポーネント間でデータを受け渡すことができ、再利用性を高めることができます。

そもそもVue.jsとは？という方は以下のリンクからご覧ください

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

親コンポーネントから子コンポーネントにデータを渡すには、子コンポーネントの定義に props オプションを追加します。この props オプションには、受け取るデータの名前をキーとし、そのデータの型やデフォルト値を指定します。

// 子コンポーネントの定義
Vue.component('child-component', {
  props: ['message'], // messageというpropsを受け取る
  template: '
{{ message }}
'
});

// 親コンポーネント内で子コンポーネントを使用し、propsを渡す
new Vue({
  el: '#app',
  template: ''
});

子コンポーネント内でのpropsの利用:

子コンポーネント内では、受け取ったpropsは、Vue.jsのデータとして扱うことができます。このpropsは、子コンポーネントのテンプレート内で使用することができます。
html

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

<script>
export default {
  props: ['message']
};
</script>
</pre>

propsの型の指定:

props には、データの型を指定することもできます。これにより、不正なデータが渡されたときに警告を表示することができます。指定できる型には、String、Number、Boolean、Array、Object、Functionなどがあります。

javascript
Vue.component('child-component', {
  props: {
    message: String // データの型を文字列として指定
  },
  template: '
{{ message }}
'
});

props を使うことで、親から子へのデータの受け渡しが簡単に行えます。これにより、コンポーネントを再利用する際に柔軟性が向上し、アプリケーションの保守性と拡張性が向上します。
共有:
Facebook
X
いいね:
いいね 読み込み中…