diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md index 75b2dde8b..915e073d1 100644 --- a/src/v2/guide/components-props.md +++ b/src/v2/guide/components-props.md @@ -27,7 +27,29 @@ Vue.component('blog-post', { Again, if you're using string templates, this limitation does not apply. -## Static and Dynamic Props +## Prop Types + +So far, we've only seen props listed as an array of strings: + +```js +props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] +``` + +Usually though, you'll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively: + +```js +props: { + title: String, + likes: Number, + isPublished: Boolean, + commentIds: Array, + author: Object +} +``` + +This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type. You'll learn much more about [type checks and other prop validations](#Prop-Validation) further down this page. + +## Passing Static or Dynamic Props So far, you've seen props passed a static value, like in: @@ -38,7 +60,11 @@ So far, you've seen props passed a static value, like in: You've also seen props assigned dynamically with `v-bind`, such as in: ```html + + + + ``` In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop. @@ -58,14 +84,14 @@ In the two examples above, we happen to pass string values, but _any_ type of va ```html - + - + - + ``` ### Passing an Array @@ -84,10 +110,10 @@ In the two examples above, we happen to pass string values, but _any_ type of va ```html - + - + ``` ### Passing the Properties of an Object @@ -150,7 +176,7 @@ There are usually two cases where it's tempting to mutate a prop: ## Prop Validation -Components can specify requirements for its props. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others. +Components can specify requirements for its props, such as the types you've already seen. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others. To specify prop validations, you can provide an object with validation requirements to the value of `props`, instead of an array of strings. For example: @@ -202,9 +228,10 @@ The `type` can be one of the following native constructors: - String - Number - Boolean -- Function -- Object - Array +- Object +- Date +- Function - Symbol In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists: