24vue学习——vue的组件的基础学习（组件化和模块化的区别）

24vue学习——vue的组件的基础学习（组件化和模块化的区别）

前言

我们前面学习很多关于 vue 的知识了，下面让我们来学习 vue 中一个重要的知识点——组件。这篇文章我们就来看看组件到底是什么吧。

1.组件的定义：

（1）官方的定义： 组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
（2）我自己的理解：组件的出现就是为了拆分 vue 实例的代码量，能够让我们以不同的组件
来划分不同的功能模块。将来我们需要什么功能，就可以去调用对应的组件即可。

2.组件化和模块化的区别：

（1）组件化：是从UI界面进行划分的——前端的组件化可以方便 UI界面的重用
（2）模块化：是从代码逻辑的角度进行划分的——方便后台代码的分层开发，保证每个功能模块的智能单一。

3.组件化实例讲解：

在上图中，八个红色方框内的内容都是类似的——背景圆 + 图标 + 标题组成的，但是我们在写这个界面的时候需要重复写同样的内容写 8 次吗？当然不用，这就需要用到 vue 的组件化的知识了，我们可以将这样的一个结构写为一个组件，传入对应的图标和标题即可。方便 UI界面的重用，使我们的代码更加的简洁。