组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：
// Define a new component called todo-item
Vue.component('todo-item', {
template: 'This is a todo '
})
现在你可以另一个组件模板中写入它：
但是这样会为每个 todo 渲染同样的文本，这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 prop字段：
Vue.component('todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '{{ todo.text }} '
})
现在，我们可以使用 v-bind指令将 todo 传到每一个重复的组件中：
这只是一个假设的例子，但是我们已经将应用分割成了两个更小的单元，子元素通过 props接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父应用的基础上，进一步为我们的 todo组件改进更多复杂的模板和逻辑。
在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。这里有一个（假想）的例子，看看使用了组件的应用模板是什么样的： 
