（04）Vue 初识——④ 使用组件改造 TodoList | Vue 基础理论实操

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
1. 引进组件的步骤？
2. 组件是什么并给个例子？
3. 组件中的全局注册是什么？
4. 为什么你需要局部注册？
5. 局部注册和全局注册在模块系统中有什么区别？

[编号：vue_04]

🔗本阶段对应的“官方文档”阅读“介绍”章节

1 前端组件化

组件，是页面的一个部分。也就是可以把一个页面，由原来一个整体，切分成一个一个的部分，每个部分都可称之为组件。

比如上图中，一号轮播可以是组件，二号分类区域可以是组件，三号榜单可以是组件，甚至四号城市切换区域也可以是个小组件。

合理地拆分组件，可以将一个大型的项目像拼积木一样拼接起来。一个大型项目，业务逻辑可能非常复杂，但当被拆分成一个个组件时，每个组件都会变得精小，这些小的组件维护起来也会相对更容易。

真实的项目中，使用组件化进行大型项目的开发，会使得代码在后续的维护性上得到极大的提高。每一个组件其实就是页面上的一个区域。

前面，我们实现了一个简易的 TodoList：输入内容，可以将内容添加至列表内。这里的每个列表项其实也是页面的一个部分，所以我们可以把这个列表项拆分为一个组件。

2 全局组件实现“列表”组件化

🚀需求：将 TodoList 中的列表封装成一个组件。

<div id="app">
  <input type="text" v-model="inputValue">
  <button v-on:click="handleBtnClick">添加</button>
  <ul>
    
    <li v-for="item in list">{{item}}</li> <!-- ❗️之前的列表项是通过循环 li 标签来显示的！ -->
 
  </ul>
</div>

❓Vue 中如何把 li 标签的内容整体变为组件？

答：可以使用 Vue 中的 Vue.component 方法创建全局组件。

<div id="app">
  <input type="text" v-model="inputValue">
  <button v-on:click="handleBtnClick">添加</button>
  <ul>

    <todo-item v-for="item in list"></todo-item> <!--4️⃣在页面上使用组件替代原有的 li 标签；
                                                  4️⃣-①：组件名全小写，第二个单词前用 - 隔开；
                                                  4️⃣-②：v-for 循环添加在组件标签上，
                                                  即每次添加都让它向列表内增加一项内容。
                                                  -->

  </ul>
</div>

<script>

  // 1️⃣在 script 标签中注册全局组件；
  Vue.component('TodoItem', { /*
  														2️⃣Vue.component 方法的第一个参数为组件名“TodoItem”，
                              组件名一般首字母大写；
                               */

    template: '<li>hello qdywxs</li>' /*
    																	3️⃣第二个为组件的 template 模板项，
    																	这里添加一个 li 标签，内容暂时为“hello qdywxs”；
                                       */
  })

  var app = new Vue({
    el: '#app',
    data: {
      list: [],
      inputValue: ''
    },
    methods: {
      handleBtnClick() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      }
    }
  })
</script>

❗️注意：注册全局组件时，我们组件名定义为 TodoItem ，使用组件时可以当成小写 todo-item 。第二个词的大写字母换为小写时，前面需加上 - 。

保存，刷新页面查看效果，这里发现一个问题：当输入内容点击“添加”后，列表出现了，但是内容却都是我们写在模板中的内容 hello qdywxs 。

❓组件中如何让输入的内容显示在列表里？

答：如果想让子组件显示输入的内容，则需要把内容传递给子组件。

<div id="app">
  <input type="text" v-model="inputValue">
  <button v-on:click="handleBtnClick">添加</button>
  <ul>
		
    <!--  1️⃣在组件上使用 v-bind 指令绑定 content；
		❗️这里整个意思是：在循环 list 数组时，每一项值赋值给 item，然后再把 item 的内容通过 v-bind 
		指令绑定给属性 content，传给 todo-item 这个子组件； -->
    <todo-item v-bind:content="item" v-for="item in list"></todo-item>

  </ul>
</div>

<script>
  Vue.component('TodoItem', {
    
    props: ['content'], // 2️⃣子组件内通过 props 来接收父组件的内容，即接收 content；
    
    template: '<li>{{content}}</li>' /*
    																 3️⃣在 template 的 li 标签内使用插值表达式
    																 显示 content 内容。
                                      */
  })

  var app = new Vue({
    el: '#app',
    data: {
      list: [],
      inputValue: ''
    },
    methods: {
      handleBtnClick() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      }
    }
  })
</script>

再次查看效果，没有问题了：

这样就完成了“列表”组件化，我们再来梳理一遍逻辑：

1. 定义了一个全局组件“TodoItem”，可以直接在模板里使用它（ todo-item ）；
2. 通过循环 list 来决定输出多少个 todo-item 组件；
3. 同时，父组件把每一项内容 item 通过 v-bind 指令借助 content 变量传给 todo-item 子组件；
4. 在 todo-item 子组件中，若要使用父组件传递的数据 content ，则一定要在 props 属性里进行接收；
5. 接收后， template 的模板里用 {{}} 包裹 content ；
6. 最终页面上渲染出内容。

3 局部组件实现“列表”组件化

在 Vue 中，除了全局组件的方式来实现列表组件化，还可以使用“局部组件”来实现。

<script>

  var TodoItem = { // 1️⃣定义 TodoItem 组件，props 接收 content 并将其写入模板；
    props: ['content'],
    template: '<li>{{content}}</li>'
  }

  var app = new Vue({
    el: '#app',

    components: { // ❗️把局部组件注册到根实例里的 components，通常用“对象 {}”来注册！

      TodoItem: TodoItem /*
      									 2️⃣注册 TodoItem 组件到 Vue 实例里，并且在这个实例内，
      									 它还是名为 TodoItem。
                          */
    },
    data: {
      list: [],
      inputValue: ''
    },
    methods: {
      handleBtnClick() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      }
    }
  })
</script>

4 总结

这一篇我们初步认识了组件，包括 Vue 中“局部组件”和“全局组件”的使用。

组件就是把页面上的一些内容进行封装。 比如关于 li 标签里的所有逻辑，都封装在了 TodoItem 这个小的组件中。小组件有自己的 props 和 template 。

• props ：若要接收外部传递过来的数据，需定义在这里；
• template ：指子组件的模板。页面内的组件标签会被子组件里的模板替换。

祝好，qdywxs ♥ you！