单个根元素
当构建一个
<blog-post>组件时，你的模板最终会包含的东西远不止一个标题：
<h3>{{ title }}</h3>
最最起码，你会包含这篇博文的正文：
<h3>{{ title }}</h3>
<div v-html="content"></div>
然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：
<div class="blog-post">
<h3>{{ title }}</h3>
<div v-html="content"></div>
</div>
看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：
<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>
所以是时候重构一下这个
<blog-post>组件了，让它变成接受一个单独的 post prop：
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单个根元素</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="blog-post-demo">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: '黄子涵', content: '黄子涵是帅哥！' },
{ id: 2, title: '黄春钦', content: '黄春钦是黄子涵的弟弟！' },
{ id: 3, title: '陈兰英', content: '陈兰英是黄子涵的妈妈！' }
]
}
})
</script>
</body>
</html>
警告
上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。
现在，不论何时为
post对象添加一个新的 property，它都会自动地在<blog-post>内可用。
