Vue组件开发实践技术点总结持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

组件化，就像乐高拼图一样，整个网站是由一些组件拼接而成，这些组件可以独立使用，也可以拼接在一起，这样开发时就能按照组件进行组件化（模块化）开发，是非常灵活的工作方式。

组件化能保证交互的一致性、保持视觉风格统一、便于修改设计与维护。

组件开发难点

高内聚低耦合

在软件时代，开发应用有两个重要的原则：高内聚和低耦合。

所谓高内聚是指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。所谓低耦合是指一个完整的系统，模块与模块之间，尽可能的使其独立存在，减少不同功能或模块之间紧密关系。高内聚和低耦合可以保证服务的独立性以及系统的灵活度，而组件化的思想正是该原则的体现。

组件化的思想关键也是使得某个功能独立化，不会影响其他组件。比如组装电脑，由不同的组件构成，例如显示器，显卡，cpu，风扇，硬盘等，即使其中的某个部件出了问题，也不会影响其他的部件，不仅如此，我们还能快速地确认电脑出现问题的部件，除此之外，我们还可以对电脑的某一部件进行配置升级。同理，我们也可以通过更换修改组件来进行软件应用的功能拓展。

最大限度的简化使用配置

举一个在开发blendPageForm组件时相关配置的变化，在这个功能上是需要实现的是表单中动态联动表格和相关formItem。通过对比，很明显最终版给使用者的体验感会更好！

第一版blendPageForm的相关配置

最终版的配置

mixins

什么是Mixins

当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性。

mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

什么时候使用Mixins

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

如何创建和使用Mixins

在src目录下创建一个mixins文件夹，文件夹下新建一个renderTagMixin.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义renderTagMixin，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象。

示例：

示例：在开发searchBar中使用了创建好的renderTagMixin：

Mixins的特点

方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。
引入mixins后组件会对其进行合并，将mixins中的数据和方法拓展到当前组件中来，在合并的过程中会出现冲突，接下来我们详细了解Mixins合并冲突

Mixins合并冲突

值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的
值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

与Vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

Model

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。

示例：

props的使用

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。你可以基于对象的语法使用以下选项：

type：可以是下列原生构造函数中的一种：String 、Number、 Boolean、 Array、 Object、 Date、 Function、 Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
default：any

为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required：Boolean

定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator：Function

自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

props在组件开发中的示例：

组件内部接收父组件的属性

父组件传递属性：

$attrs的使用

只读
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

示例：