1props: {
2  name: {
3    type: String,
4    default: 'John Doe'
5  }
6}

1Vue.component('my-component', {
2  props: {
3    // Basic type check (`null` and `undefined` values will pass any type validation)
4    propA: Number,
5    // Multiple possible types
6    propB: [String, Number],
7    // Required string
8    propC: {
9      type: String,
10      required: true
11    },
12    // Number with a default value
13    propD: {
14      type: Number,
15      default: 100
16    },
17    // Object with a default value
18    propE: {
19      type: Object,
20      // Object or array defaults must be returned from
21      // a factory function
22      default: function () {
23        return { message: 'hello' }
24      }
25    },
26    // Custom validator function
27    propF: {
28      validator: function (value) {
29        // The value must match one of these strings
30        return ['success', 'warning', 'danger'].indexOf(value) !== -1
31      }
32    }
33  }
34})

1<!-- Dynamically assign the value of a variable -->
2<blog-post v-bind:title="post.title"></blog-post>
3
4<!-- Dynamically assign the value of a complex expression -->
5<blog-post
6  v-bind:title="post.title + ' by ' + post.author.name"
7></blog-post>