Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成 ref: http://qiita.com/potato4d/items/1b92df0cbf9b0b6cf8d6

AccountInfo.type.js

export const accountKeys = [
  'id',
  'name',
  'bio'
];

AccountInfo.vue

import { hasKeys } from 'path/to/ObjectTypeCheck';
import { accountKeys } from './AccountInfo.type';
export default {
  props: {
    account: {
      validator(val) {
        return hasKeys(val, accountKeys);
      }
    }
  }
}

file7.txt

./LikeButton.vue
./LikeButton.type.js

file9.txt

./AccountInfo.vue
./AccountInfo.type.js

LikeButton.type.js

export const size = [
  'small',
  'medium'
];

LikeButton.vue

<template>
  <div>
    <button :type="type" class="like-button" :class="buttonClass" @click="handleClick">
      +{{count}}likes
    </button>
  </div>
</template>

<style>
.like-button {
  /* 何かしらのスタイル */
}

.like-button.button-small {
  padding: 6px 10px;
}

.like-button.button-medium {
  padding: 10px 13px;
}

</style>

<script>
export default {
  props: ['count', 'size'],
  data () {
    return {
      isClicked: false
    }
  }
  computed: {
    nowCount () {
      return this.isClicked ? ( this.count + 1 ) : this.count;
    },
    buttonClass () {
      const style = {}
      style[`button-${this.size}`] = true
      return style
    }
  },
  methods: {
    handleClick () {
      this.isClicked = !this.isClicked;
    }
  }
}
</script>

ObjectTypeCheck.js

export function hasKeys(obj, keys) {
  return !keys.find((key)=>(!obj.hasOwnProperty(key)))
}

より厳密な記法

export default {
  props: {
    count: Number,
    size: String
  }
}

カスタムバリデーションをベースとする記法

export default {
  props: {
    count: Number,
    size: {
      type: String,
      validator (val) {
        return ['small', 'medium'].includes(val)
      }
    }
  }
}

バリデーションのみのコード

export default {
  props: {
    count: Number,
    size: {
      type: String,
      validator (val) {
        return ['small', 'medium'].includes(val)
      }
    }
  }
}

型ベースのみの記法

export default {
  props: {
    count: Number,
    size: String
  }
}

従来の記法

export default {
  props: ['count', 'size']
}

必須とデフォルト値がついたコード

export default {
  props: {
    count: {
      type: Number,
      required: true
    },
    size: {
      type: String,
      default: 'meduim',
      validator (val) {
        return ['small', 'medium'].includes(val)
      }
    }
  }
}