From 453df6db5cb52e0cf4085a3c4deac9fc29d32a0b Mon Sep 17 00:00:00 2001
From: Artiom Giza <artiom.giza@gmail.com>
Date: Wed, 16 May 2018 11:42:33 +0300
Subject: [PATCH 1/3] Update components.md

---
 src/v2/guide/components.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index ad5a4a9a0b..f326014471 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -229,6 +229,20 @@ If you try this in your template however, Vue will show an error, explaining tha
 </div>
 ```
 
+Here we pass entire post object to the `props` option instead of separately pass title and content:
+
+```js
+Vue.component('blog-post', {
+  props: ['post'],
+  template: `
+    <div class="blog-post">
+      <h3>{{ post.title }}</h3>
+      <div v-html="post.content"></div>
+    </div>
+  `
+})
+```
+
 ## Sending Messages to Parents with Events
 
 As we develop our `<blog-post>` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:

From 3b6fadb661ddfd1e39f64d90e6e57a193738bdb6 Mon Sep 17 00:00:00 2001
From: Artiom Giza <artiomg@gettaxi.com>
Date: Thu, 17 May 2018 10:15:03 +0300
Subject: [PATCH 2/3] Update components.md

---
 src/v2/guide/components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index f326014471..eeaddb857c 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -229,7 +229,7 @@ If you try this in your template however, Vue will show an error, explaining tha
 </div>
 ```
 
-Here we pass entire post object to the `props` option instead of separately pass title and content:
+Here, we pass the entire post object to the `props` option instead of separately passing the title and content.
 
 ```js
 Vue.component('blog-post', {

From 543c91ac6217ae44d2172abd3d49c2bd6dadf583 Mon Sep 17 00:00:00 2001
From: Chris Fritz <chrisvfritz@gmail.com>
Date: Thu, 17 May 2018 14:05:32 -0400
Subject: [PATCH 3/3] improve flow of single root component section

---
 src/v2/guide/components.md | 39 ++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index eeaddb857c..30968ba9eb 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -210,26 +210,47 @@ That's all you need to know about props for now, but once you've finished readin
 When building out a `<blog-post>` component, your template will eventually contain more than just the title:
 
 ```html
-<h3>{{ post.title }}</h3>
+<h3>{{ title }}</h3>
 ```
 
 At the very least, you'll want to include the post's content:
 
 ```html
-<h3>{{ post.title }}</h3>
-<div v-html="post.content"></div>
+<h3>{{ title }}</h3>
+<div v-html="content"></div>
 ```
 
 If you try this in your template however, Vue will show an error, explaining that **every component must have a single root element**. You can fix this error by wrapping the template in a parent element, such as:
 
 ```html
 <div class="blog-post">
-  <h3>{{ post.title }}</h3>
-  <div v-html="post.content"></div>
+  <h3>{{ title }}</h3>
+  <div v-html="content"></div>
 </div>
 ```
 
-Here, we pass the entire post object to the `props` option instead of separately passing the title and content.
+As our component grows, it's likely we'll not only need the title and content of a post, but also the published date, comments, and more. Defining a prop for each related piece of information could become very annoying:
+
+```html
+<blog-post
+  v-for="post in posts"
+  v-bind:key="post.id"
+  v-bind:title="post.title"
+  v-bind:content="post.content"
+  v-bind:publishedAt="post.publishedAt"
+  v-bind:comments="post.comments"
+></blog-post>
+```
+
+So this might be a good time to refactor the `<blog-post>` component to accept a single `post` prop instead:
+
+```html
+<blog-post
+  v-for="post in posts"
+  v-bind:key="post.id"
+  v-bind:post="post"
+></blog-post>
+```
 
 ```js
 Vue.component('blog-post', {
@@ -243,6 +264,10 @@ Vue.component('blog-post', {
 })
 ```
 
+<p class="tip">The above example and some future ones use JavaScript's [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to make multi-line templates more readable. These are not supported by Internet Explorer (IE), so if you must support IE and are not transpiling (e.g. with Babel or TypeScript), use [newline escapes](https://css-tricks.com/snippets/javascript/multiline-string-variables-in-javascript/) instead.</p>
+
+Now, whenever a new property is added to `post` objects, it will automatically be available inside `<blog-post>`.
+
 ## Sending Messages to Parents with Events
 
 As we develop our `<blog-post>` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:
@@ -290,8 +315,6 @@ Vue.component('blog-post', {
 })
 ```
 
-<p class="tip">The above example and some future ones use JavaScript's [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to make multi-line templates more readable. These are not supported by Internet Explorer (IE), so if you must support IE and are not transpiling (e.g. with Babel or TypeScript), use [newline escapes](https://css-tricks.com/snippets/javascript/multiline-string-variables-in-javascript/) instead.</p>
-
 The problem is, this button doesn't do anything:
 
 ```html