【Vue】propsのdefault（デフォルト）とは何か？使い方を実例で解説｜エラー対処法：Props with type Object/Array must use a factory function to return the default value.

Vue.js

2023/12/22

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

Vueを使っているとpropsオブジェクトの中で、defaultといった表記を見かけることがあります。

ここでは、defaultとは何か？いつ使うのか？どう使うのか？について実例を踏まえて解説しています。

defaultとは何か？

defaultは親コンポーネントから子コンポーネントに指定したデータが受け渡されていなくても、エラーにならずに使える便利な機能です。

通常親のテンプレートから子のテンプレートに対して、:msg="msg"といったようにv-bindでデータを渡す必要があります。

ところが、propsの中のプロパティにdefaultを設定しておけば、親子のコンポーネントから子コンポーネントにデータが渡されていなくても、子のコンポーネントの中で、propsで指定したプロパティが使えます。

point

親コンポーネントからデータが渡された場合は、そちらが優先となるため、defaultの値は無視されます。

defaultの使い方は大きく次の2種類に分かれます。

defaultの指定方法

1つ目は配列とオブジェクト以外（String, Number, Booleanなど）です。

この場合は、通常のプロパティの値を指定するとうに、defaultの後ろに値を記述します。

プロパティ名{ default: 値 }

export default {
  props:{
    text: { type:String, default:"デフォルトの値です" },
    numbers: {type:[Number], default:100 },
  }
}

配列とオブジェクト（ArrayとObject）は関数で記述する必要があります。

 default: function () {
        return 値
}

functionを省略して、アロー関数で記述することもできます。

 default: () => 値

 default: function () {
        return { message: 'hello' }
}

　↑↓ 同じ

 default: () => { message: 'hello' }

なお、配列を指定する場合は以下のようになります。

export default {
  props:{
    arr: {default:()=>[]},
    arr2: {default:()=>[ 111, 222, 333 ]},
  }
}

defaultで関数やオブジェクトを指定するときに、関数としない場合は以下のようなエラーが発生します。

Props with type Object/Array must use a factory function to return the default value.

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

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

propsのrequiredとは何か？

propsのtypeとは何か？