• 单个根元素

    单个根元素

    当构建一个 <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> 内可用。