From 6213ec8389693c479b73f3ad64b77cdf489ca170 Mon Sep 17 00:00:00 2001
From: Chris Fritz <chrisvfritz@gmail.com>
Date: Thu, 24 May 2018 20:53:20 -0400
Subject: [PATCH] Reorganize component props to introduce prop types earlier,
 fixes #1644 (#1646)

@BlitZz96 brought up a good point in [this issue](https://github.com/vuejs/vuejs.org/issues/1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it.
---
 src/v2/guide/components-props.md | 45 +++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 9 deletions(-)

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
+<!-- Dynamically assign the value of a variable -->
 <blog-post v-bind:title="post.title"></blog-post>
+
+<!-- Dynamically assign the value of a complex expression -->
+<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
 ```
 
 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
 <!-- Including the prop with no value will imply `true`. -->
-<blog-post favorited></blog-post>
+<blog-post is-published></blog-post>
 
 <!-- Even though `false` is static, we need v-bind to tell Vue that -->
 <!-- this is a JavaScript expression rather than a string.          -->
-<base-input v-bind:favorited="false">
+<blog-post v-bind:is-published="false"></blog-post>
 
 <!-- Dynamically assign to the value of a variable. -->
-<base-input v-bind:favorited="post.currentUserFavorited">
+<blog-post v-bind:is-published="post.isPublished"></blog-post>
 ```
 
 ### Passing an Array
@@ -84,10 +110,10 @@ In the two examples above, we happen to pass string values, but _any_ type of va
 ```html
 <!-- Even though the object is static, we need v-bind to tell Vue that -->
 <!-- this is a JavaScript expression rather than a string.             -->
-<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>
+<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"></blog-post>
 
 <!-- Dynamically assign to the value of a variable. -->
-<blog-post v-bind:post="post"></blog-post>
+<blog-post v-bind:author="post.author"></blog-post>
 ```
 
 ### 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: