Vue.jsコンポーネントの小道具

小道具は、状態を子コンポーネントに渡すために使用されます。それらについてすべて学ぶ

コンポーネント内に小道具を定義する

小道具は、コンポーネントがそれらを含むコンポーネント(親コンポーネント)からデータを受け入れる方法です。

コンポーネントが1つ以上の小道具を期待する場合、コンポーネントでそれらを定義する必要がありますpropsプロパティ:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

または、Vueシングルファイルコンポーネントの場合:

<template>
  <p>{{ name }}</p>
</template>

<script> export default { props: [‘name’] } </script>

複数の小道具を受け入れる

配列に追加することで、複数の小道具を作成できます。

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

小道具の種類を設定する

配列の代わりにオブジェクトを使用し、プロパティの名前を各プロパティのキーとして使用し、タイプを値として使用することで、小道具のタイプを指定できます。

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

使用できる有効なタイプは次のとおりです。

  • ストリング
  • ブール値
  • アレイ
  • オブジェクト
  • 日付
  • 関数
  • シンボル

タイプが一致しない場合、Vueはコンソールで(開発モードで)警告を発します。

小道具の種類をより明確にすることができます。

複数の異なる値タイプを許可できます。

props: {
  firstName: [String, Number]
}

小道具を必須に設定する

小道具を必須にするように要求できます。

props: {
  firstName: {
    type: String,
    required: true
  }
}

小道具のデフォルト値を設定します

デフォルト値を指定できます。

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

オブジェクトの場合:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

default実際の値ではなく、適切な値を返す関数にすることもできます。

カスタムバリデーターを作成することもできます。これは、複雑なデータに最適です。

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

コンポーネントに小道具を渡す

構文を使用して小道具をコンポーネントに渡します

<ComponentName color="white" />

渡すものが静的な値である場合。

データプロパティの場合は、

<template>
  <ComponentName :color=color />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

prop値内で三項演算子を使用して、真の条件をチェックし、それに依存する値を渡すことができます。

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: