Vue 2.5从零开始学习 —— Vue TodoList 中的

什么是组件？

Vue 和其他现代的前端框架得名于把大型网页分割成为一个个小小的独立的组件，那么我们今天就来看看怎样定义和制作一个我们自己的组件吧！

• Component ：

  可以预见的是，在后续开发的更新中，TodoList 的每一条数据的展示形式可能会变得极其复杂，所以我们可以尝试着把 TodoList 的每一个单条目拆成一个组件。

  在这之前我们得学习一下 Vue 中 component 的写法：

  Vue 为我们提供了定义组件的接口：

  • 第一种方式是 全局组件：

  Vue.component('todo-item', {
      template: '<li> item </li>'
  })
  

  • 第二种方式是 局部组件：

  var todoItem = {
      template: '<li> item </li>'
  }  // 定义一个 JavaScript 对象存放模板信息
  
  new Vue({
      el: "#app",
      components: {
          'todo-item' todoItem
      }
      data() { ... }
    methods: { ... }
  })
  

• 我们这里先采用 全局组件，这样对教学方便一些：

  既然我们对 <ul> 和 <li> 标签都需要使用到 v-for 指令，那么对此也不例外。

  想要加载出 list 数组里那么多条的数据，就也得在 todo-item 组件上加 v-for ：

  <todo-item
        v-for="(item, index) in list"
    :key="index">
  </todo-item>
  

  可是这样每次显示出来的都只是 item ：

1545908493152.png

• 说明我们的工作还没完成，接着前进！

  我们需要在 todo-item 元素标签内加入属性，以 v-bind 的形式把 循环单次变量 item 绑定成一个参数 content 并传参：

  <todo-item
        v-for="(item, index) in list"
    :key="index"
    :content="item">
  </todo-item>
  

接下来请注意！我们不能什么都不做就直接在 模板的 html 信息中直接采取 插值表达式 的写法哦！

Vue.component('todo-item', {
  template: '<li>{{ content }}</li>'
})

请一定要记得在 Vue.component 中加入 props ，用以接收参数：

Vue.component('todo-item',{
    props: ['content']
    template: '<li> {{ content }} </li>'
})

• 这样之后，效果就成啦！和之前一模一样，但是这之后就可以完成对单个组件的升级与复用。

完成效果