创建Vue.js可重用组件的详细说明

Vue.js是一个用于构建用户界面的渐进式框架。我们可以使用简单的API来实现响应数据绑定和组合视图组件。

从维护视图到维护数据，Vue.js让我们可以快速开发应用程序。但是随着业务代码的不断增长，组件越来越多，组件之间的逻辑耦合严重，使得代码维护非常困难。

同时，Vue.js的接口和语法非常自由，同样的功能有多种实现方式。每个人解决问题的思路不一样，写出来的代码也不一样，缺乏团队内部的规范。

本文的目的是从组件开发的不同方面列出合理的解决方案，作为建立组件规范的参考。

构成一个组件

组件是具有一定功能的模块，不同组件之间功能相对独立。组件可以是按钮、输入框、视频播放器等等。

高内聚、低耦合的可重用组件。

那么，什么构成了一个组件？以浏览器的原生组件视频为例，分析组件的组件。

视频src=' http:example.mp4 '宽度=' 320 '高度=' 240 ' on load=' load handler ' on error=' error handler '您的浏览器不支持视频标记。/从视频示例中可以看出，组件由状态、事件和嵌套片段组成。State是组件的一些当前数据或属性，例如视频中的src、宽度和高度。事件是组件在特定时间触发某些操作的行为。例如，当视频资源加载结果或失败时，它会触发相应的事件来执行处理。片段是指嵌套在组件标签中的内容，在某些条件下会显示出来，比如浏览器不支持视频标签时会显示提示信息。

在Vue组件中，状态称为道具，事件称为事件，片段称为槽。组件的组件也可以理解为组件的外部接口。一个好的可重用组件应该定义一个清晰的开放接口。

Props允许外部环境将数据传递给组件Events允许组件触发外部环境的副作用Slots允许外部环境在组件中组合额外的内容。使用vue展开视频组件，并构建支持播放列表的组件myVideo:

my-video : playlist=' playlist ' width=' 320 ' height=' 240 ' @ load=' load handler ' @ error handler ' @ play next=' next handler ' @ playprev=' prev handler ' di该vslot=' end page '/div/my-video my video组件有一个清晰的接口，接收播放列表、播放器宽度等的状态。可以触发加载成功或失败，并播放上一个或下一个事件，并且可以在播放结束时自定义尾页，可用于插入广告或显示下一个视频信息。

组件之间的通信

在Vue.js中，父子组件之间的关系可以概括为道具向下，事件向上。父组件通过道具向下传递数据给子组件，子组件通过事件向父组件发送消息。看看它们是如何工作的。

业务无关紧要

名字

组件的命名应该独立于业务。组件应该根据它们的功能来命名。

例如，显示公司部门的列表将每个项目作为一个组件，并将其命名为部门项目。这个时候有一个显示团队成员列表的要求，样式和刚才的部门列表一样。显然，DepartmentItem这个名字不合适。

因此，可重用组件在命名时应避免与业务相关，并根据其角色和功能进行命名。项目、列表项目、单元格.可以参考一些UI框架的命名，比如Bootstrap和ElementUI。

独立于业务数据

可重用组件只负责UI显示，一些交互和动画，如何获取数据与此无关，所以不要获取组件内部的数据，也不要进行任何与服务器打交道的操作。可重用组件只实现与UI相关的功能。

组件责任

约束组件的职责可以使组件更好地解耦，知道组件实现了哪些功能，哪些功能不需要实现。

组件可以分为通用组件(可重用组件)和业务组件(一次性组件)。

可重用组件实现通用功能(不会因组件的位置和场景而改变):

用户界面显示与用户的交互(事件)。动画效果业务组件实现部分业务功能：

获取数据和vuex相关操作。掩埋点并引用可重用组件。可重用组件应该最大限度地减少对外部条件的依赖。所有与vuex相关的操作都不应该出现在可重用组件中。

组件应该避免依赖它们的父组件，并且不要使用这个。$parent来操作父组件的示例。父组件不应通过此引用子组件的示例。$children，但是通过子组件的接口与之交互。

命名空间

可重用组件不仅定义了一个清晰的开放接口，还需要一个命名空间。名称空间可以避免与浏览器保留的标记和其他组件冲突。特别是当项目引用外部UI组件或组件迁移到其他项目时，命名空间可以避免许多命名冲突。

XL-按钮/XL-按钮XL-表格/XL-表格XL-对话框/XL-对话框.业务组件也可以有命令空间，这与一般组件不同。这里，st (section)用于表示业务组件。

ST-推荐/ST-推荐-QQ-电影/ST-QQ-电影-搜狐-系列/ST-搜狐-系列是上下文无关的

同样，可重用组件应该尽量减少对外部条件的依赖。不要在没有特殊要求的情况下，在单个组件不太重的前提下，将一个具有独立功能的组件拆分成几个小组件。

Table-wrapper Table-header slot=' header ' : headers=' example header '/Table-header Table-body slot=' body ' : body-content=' example contents '/Table-body/Table-wrapper Table header组件和TableBody组件取决于当前上下文，即TableWrapper组件嵌套的环境。你可以有一个更好的解决方案：

XL-table : headers=' example header ' : body-content=' example contents '/XL-table context-free原则可以降低使用组件的门槛。

数据展平

定义组件接口时，尽量不要将整个对象作为道具传入。

！-反例-card : item=' { title : item . name，description: item.desc，poster: item.img}/card每个道具都应该是简单类型的数据。这有以下优点：

组件界面清晰。道具检查很方便。当服务器返回的对象中的键名不同于组件接口时，就不需要重构对象了

Card: title=' item。name' : description='项。desc' :海报='项目。img '/卡平道具可以帮助我们更直观地理解组件的界面。

使用自定义事件实现数据的双向绑定

有时，对于一种状态，需要从组件内部和外部进行更改。

例如，父组件可以初始化模式框的显示，模式框组件内的关闭按钮可以隐藏它。一个好主意是使用自定义事件来更改父组件中的值：

modal : show=' show ' @ show change=' show=引数[0]'/modal！-modal . vue-template div v-show=' show ' H3标题/H3内容/H3/p a href=' JavaScript :'rel=' external no follow ' rel=' external no follow ' @ click=' close ' close/a/div/template脚本导出默认{props : {show : string}，Methods: {close () {this。$ emit ('input '，false)}}/script当用户单击关闭按钮时，Modal组件向父组件发送一个输入自定义事件。当父组件侦听输入事件时，将show设置为事件回调的第一个参数。

特别是当状态名为value，事件名为input时，可以使用v-model指令语法sugar:

Modal:值=' show' @ input=' show=引数[0]'/modal相当于

模态v-model='show'/model要使组件的v-model生效，它必须：

接受一个值属性，并在有新值时触发输入事件。注意：由于每个组件的输入事件只能用于双向绑定一个数据，当有多个数据需要向上同步时，请不要使用v-model，使用多个自定义事件，同步父组件中的新值。

modal : show=' show ' @ show change=' show=参数[0]' : content=' content ' @ content change=' content=参数[0]'/模型使用自定义观察器来优化DOM操作

在开发中，有些逻辑不能使用数据绑定，操作DOM是不可避免的。例如，视频的播放需要同步视频对象的播放操作和组件内的播放状态。您可以使用自定义观察器来优化DOM的操作。

！-myvideo . vue-template div video ref=' video ' src=' http : src '/video a href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' @ click=' toggle play ' { playing？pause ' : ' playing ' } }/a/div/template script export default { prop s : { src 3360 string//playing address }，当data(){ return { playing g : false//正在播放}时，watch: {//更改播放状态，执行相应的操作playing (val) {let video=this。$ refs . video if(val){ video . play()；} else { video . pause()；}} }，method : {//toggle play(){ this . playing=！在这个. playing}} }/script例子中，当自定义观察器监测到播放状态的变化时，就会播放或暂停。处理视频播放状态时，只需要关注播放状态即可。

项目框架

单个组件没有太大区别，组件要在功能独立的前提下尽量简单。组件越简单，可重用性越强。当您有数百行代码来实现组件时，不包括CSS(大小取决于业务)，您应该考虑拆分成更小的组件。

当组件足够简单时，我们可以自由地将这些组件组合在一个更大的业务组件中，以实现我们的业务功能。因此，理想情况下，组件的参考电平只有两个级别。业务组件指的是通用组件。

我们可以得到一个平面结构。

在一个庞大的项目中，组件之间的引用关系会更加复杂。当单页应用程序有多条路由时，每个路由组件都太重，需要拆分模块。装配结构如下图所示。

按照这个思路来构建我们的项目，最终的源代码目录结构(不包括建设过程文件):

App.vue #顶级组件客户端-entry.js #前端入口文件 config.js #配置文件 main.js #主入口文件 api #界面APIassets #静态资源components #通用组件方向#自定义指令mock #模拟数据plugins #自定义插件router #路由配置sections #业务组件商店# Vuex商店utils #工具模块视图#路由页面组件常见

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。