04Vue - Vue.js 入门（用组件构建应用）

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

现在你可以另一个组件模板中写入它：

<ul>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ul>

但是这样会为每个 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: '<li>{{ todo.text }}</li>'
})

现在，我们可以使用 v-bind指令将 todo 传到每一个重复的组件中：

这只是一个假设的例子，但是我们已经将应用分割成了两个更小的单元，子元素通过 props接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父应用的基础上，进一步为我们的 todo组件改进更多复杂的模板和逻辑。

在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。这里有一个（假想）的例子，看看使用了组件的应用模板是什么样的：