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

vue-js-prograshi(プロぐらし)-kv Vue.js
記事内に広告が含まれていることがあります。
[PR]

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

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


defaultとは何か?

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

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

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

point

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


defaultの使い方

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

defaultの指定方法
  • 配列とオブジェクト以外(String, Number, Booleanなど)
  • 配列とオブジェクト(ArrayとObject)


配列とオブジェクト以外(String, Number, Booleanなど)

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

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

プロパティ名{ default: 値 }


実例

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



配列とオブジェクト(ArrayとObject)

配列とオブジェクト(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以外のバリデーションも合わせて設定する方法

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

実例

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


参考リンク



vue公式プロパティページへのリンク


タイトルとURLをコピーしました