基礎からメモ： Vue.js CH5-p159 親子間で受け取るデータのデータ型を指定する

Vue.js

propsで受け取るデータのデータ型を指定する

propsで受け取るデータのデータ型を指定しておくことができる。受け取るデータ名にStringなどのデータ型を指定しておく。

<div id="app">
  <comp-child str="文字列データ"></comp-child>
</div>

Vue.component('comp-child', {
  template: `<p>{{ str }}</p>`,
  props: {
    str: String, // 文字列型データのみ許可する
  }
});

var app = new Vue({
  el: '#app',
});

この指定で例えばルートコンストラクタの数値データを使うと、

<comp-child v-bind:str='num'></comp-child>

var app = new Vue({
  el: '#app',
  data: {num: (100 + 50)} 
});

ブラウザ側に「150」と計算結果は表示されるが、コンソールに警告が出る。

vue.js:597 [Vue warn]: Invalid prop: type check failed for prop "str". Expected String, got Number.

found in

---> <CompChild>
       <Root>

データ型指定が無いと、数値計算が必要な場面で数字文字列が渡されてもエラーが出ない。そういう場合でも、データ型に数値を指定しておけば警告が出るので、潜在的なバグの原因を防げる。

<div id="app">
  <comp-child v-bind:num="count1"></comp-child>
  <comp-child v-bind:num="count2"></comp-child>
</div>

"count2"は警告が出る。

Vue.component('comp-child', {
  template: `<p>{{ num }}</p>`,
  props: { num: Number }  // 数値型データのみ許可する
});

var app = new Vue({
  el: '#app',
  data: {
    count1: 150,
    count2: (10 + '5') //count2: (10 + '5')   // vue.js:597 [Vue warn]: Invalid prop: type check failed for prop "num". Expected Number, got String.
  }
});

データ型指定の例

データ型指定のサンプルをいくつか

HTML側はルートインスタンスの持つitemデータを表示するとして

<div id="app">
  <comp-child v-bind:val='item'></comp-child>
</div>

そのルートインスタンスitemデータは、別に定義したオブジェクトitem_dataのdata1〜data6のどれかを使うとする。

let item_data = {
  data1: (150 + 50),
  data2: '文字列',
  data3: 'Vue',
  data4: '',
  data5: {},
  data6: 11
};

var app = new Vue({
  el: '#app',
  data: {
    item: item_data.data1  // <- data1〜data6のどれかを使う
  }
});

それに対して、子コンポーネント側のデータ型指定をいろいろ変えてみる。

Vue.component('comp-child', {
  template: "<p>{{ val }}</p>",
  props: { val: Number }    // <- データ型指定を差し替えてテスト
});

複数のデータ型を認める

まず、data1: (150 + 50)に対してval: Numberなら数値指定なのでエラーは出ないが、data2: '文字列'だと先程のエラーが出る。 これに対して、数値または文字列どちらかという指定をするとdata1〜data3まで受け入れられる。

{ val: [String, Number]}

必須指定

次に文字列でかつ必須という次の指定をすると、data2, data3はOKだが、data4: ''の空文字列はエラーにならないが、値がnullだと警告が出る。

{ val: { type: String, required: true }}

デフォルト値指定

次に数値指定でデフォルト値を100とする。空文字列も含め文字列では警告が出る。値がnullだと警告はでないが、デフォルト値が使われるわけではない。値にundefinedを明示したときにデフォルト値100が表示された。

{ val: { type: Number, default: 100 }}

オブジェクト型指定

データ型をオブジェクトにし、デフォルトのオブジェクトを定義する。data5: {}の空のオブジェクトだと空のまま使われるが、やはりundefinedを明示したときにデフォルトのオブジェクトが表示される。

{ val: {
    type: Object,
    default: function() {
      return { message: 'Hello' }
    }
  }
}

カスタムバリデータ関数

最後に数値指定で、チェック用の関数を定義して受け入れる許容範囲を決めておく。

{ val: {
    type: Number,
    validator: function(value) {
      return value > 10
    }
  }
}

data6: 11は通過して表示されるが、数値を10以下にするとチェック通過できないという警告が出る。

vue.js:597 [Vue warn]: Invalid prop: custom validator check failed for prop "val".

found in

---> <CompChild>
       <Root>