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

2018-12-27 本文已影响0人路万奇与青川君

什么是组件？

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: { ... }
})
```

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>'
})

完成效果