组件基础
这里有一个 Vue 组件的示例：
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <my-template> 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用,如上图。
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
组件的复用
可以将组件进行任意次数的服用：
注意当点击按钮时，每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个它的新实例被创建。
data必须是一个函数
当我们定义这个 <my-template> 组件时，你可能会发现它的 data 并不是想这样提供一个对象：
data:{
count:0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data:fuction(){
return {
count:0
}
}
如果 Vue没有这条规则，点击一个按钮，点击一个按钮，会影响到其他所有实例。
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。到目前为止，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component('my-component-name', {
// ... options ...
})
全局注册的组件可以用在被注册之后的任何（通过 new Vue）新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
通过 Prop 向子组件传递数据
早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。
Prop 是你可以在组件上注册的一些自定义属性。当一个值传递给以额 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件中传递一个标题，我们可以用一个 props 选项将其包含在的该组件可接受的 prop 列表中：
然后在一个典型的应用中，你可能在 data 里有一个博文的数组：
并想要位每篇博文渲染一个组件：
<my-template v-for="post in posts"
v-bind:key="post.id"
v-bind:tittle="post.tittle"></my-template>
如上所示，会发现我们可以使用 v-bind 来冬天传递 prop。这在一开始不清楚要渲染的具体内容，比如从一个API获取博文列表的时候，是非常有用的。
单个根元素
当构建一个 <my-template> 组件时，
你的模板最终会包含的东西远不止一个标题：
<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>
看起来当组件变得越来越复杂的时候，我们的博文不只需要标 | 
转播
