【Vue】propsのrequiredとは何か？使い方や注意点を実例で解説｜エラー対処法：[Vue warn]: Missing required prop: “プロパティ名”

Vue.js

2023/12/23

記事内に広告が含まれていることがあります。

Vueを使っているとpropsの中でrequiredが定義されていることがあります。

ここではrequiredの使い方や注意点を実例で解説しています。

requiredとは何か？

requiredのバリデーションを設定すると、指定したプロパティが親コンポーネントから子コンポーネントから渡されることが必須となります。

プロパティ名: { required: true }

point

デフォルトでは、required: falseの設定になっています。

注意点

指定したプロパティが親コンポーネントから渡されていない場合でも画面は表示されます。エラーではなく、警告としてコンソールにメッセージが表示されます。

required:trueを設定した変数が親から渡されていない場合はコンソールに警告が表示されます。

以下のように「arrs」という変数に対して「required:true」を設定したときの警告は次の通りです。

export default {
  props:{
    arrs: {type:[Array], required:true}
  }
}

[Vue warn]: Missing required prop: "arrs"

requiredと合わせて、typeなどの型の指定など他のバリデーションも設定する場合は、プロパティの値をオブジェクト形式で記述する必要があります。

  props: {
    number: {
      type: Number,
      required: true
    }
  },

propsのdefaultとは何か？

propsのtypeとは何か？