单个根元素

当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：

  1. <h3>{{ title }}</h3>

最最起码，你会包含这篇博文的正文：

  1. <h3>{{ title }}</h3>
  2. <div v-html="content"></div>

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

  1. <div class="blog-post">
  2.   <h3>{{ title }}</h3>
  3.   <div v-html="content"></div>
  4. </div>

看起来当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦：

  1. <blog-post
  2.   v-for="post in posts"
  3.   v-bind:key="post.id"
  4.   v-bind:title="post.title"
  5.   v-bind:content="post.content"
  6.   v-bind:publishedAt="post.publishedAt"
  7.   v-bind:comments="post.comments"
  8. ></blog-post>

所以是时候重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：

  1. <blog-post
  2.   v-for="post in posts"
  3.   v-bind:key="post.id"
  4.   v-bind:post="post"
  5. ></blog-post>
  1. Vue.component('blog-post', {
  2.   props: ['post'],
  3.   template: `
  4.     <div class="blog-post">
  5.       <h3>{{ post.title }}</h3>
  6.       <div v-html="post.content"></div>
  7.     </div>
  8.   `
  9. })

上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。

现在，不论何时为 post 对象添加一个新的属性，它都会自动地在 <blog-post> 内可用。