vue组件是什么样子的（记录–vue组件划分的思考）
这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
对vue项目来说 ，组件是构成项目的基本单元 ，为了方便理解 ，这里定义两类组件：页面组件 ，功能组件 。
为什么需要划分这两类组件是从组件复用来考虑的 。我们知道在复杂应用中 ，页面状态管理早已不是早期的简单的子父组件的传值 ，兄弟组件传值 。而当我们寻求到vuex这种状态管理来处理组件间状态管理的时候 ，我们同样也对使用vuex的组件失去了复用的可能 。
所以 ，对于该类使用或者可能使用第三方库的组件划分为页面组件 ，而剩下的和第三方库无依赖关系的组件划分为功能组件 。
从而我们可以理解为 ，页面组件是无法复用的组件 ，功能组件是可以复用的组件 。如何定义他们
最先对页面组件的定义仅仅是整张页面的统筹 ，页面组件也是由一个个功能组件堆叠而成的 ，比如element-ui这样的组件库 ，他们的组件都可以称之为功能组件 。而我们所写的页面 ，引入了element-ui中的各种组件堆出了一张管理系统的页面 ，就是页面组件 。我们通常会在页面组件中发送数据请求 ，根据接口返回数据 ，处理为可用数据 ，然后将数据分发给不同功能组件 。同样 ，页面组件也会接受功能组件返回值 ，根据返回值做不同的处理（或请求数据 ，或修改数据）
而对功能组件的定义为 ，他的展示只受父组件通过props组件传值过来的数据影响 ，他的所有状态均为内部私有 ，与外部组件的交互有vue提供的props以及事件分发vm.$emit() 。因为只有这也组件才能保证其完整的内部状态 ，在复用时不受其他因素的影响 。
如何划分他们
划分页面组件最简单的方式是由路由划分 ，每一个路由对应一个页面组件 。
功能组件的划分需要对页面组件的功能进行分析分类 。功能组件的划分可能根据不同人的理解各不相同 ，但是原则只有一个：拿当你看见这篇博文时页面的布局来举个例子：
在谈谈自己对页面组件的理解
自己对页面组件的理解仅仅是各种功能组件的整合 ，就和我们写以前项目中使用js调用各种库一样 ，通过这些库写出了各种效果 。我们可能通过jquery的ajax发送一个请求 ，请求回来一个分也数据 ，我们把分页数据处理 ，把数据条数传给了一个分页插件 ，然后分页插件帮我们渲染出了分页器 。我们可能把请求回来的列表内容传递给了一个自己封装的表格渲染插件 ，表格渲染插件帮我们渲染出了我们想要的表格数据并且显示在了页面上面 。而页面组件就担任这这个js所做的功能 ，请求数据 ，分发数据 ，接受插件的回调 ，在请求数据 ，在分发数据
而页面组件也是一样 ，请求处理数据 ，分发数据给对应组件的props ，接受某些组件的vm.$emit()传回来的值 ，在请求处理数据 ，修改组件的props的值进行传递由上面一系列类比 ，其实组件就好比或者说就是插件 ，或者面向对象的写法 。思想上面对组件的划分就和对功能的封装 。组件留的props就是对接口的定义 。本质上没区别的 。
本文转载于:
https://blog.csdn.net/stopllL/article/details/79473357
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！