Vue 自定义组件开发心得-对话框

目录

组件的封装我认为要遵循的原则

Dialog显隐在组件外维护

Dialog 显隐在组件内维护

同时使用多个Dialog时的代码风格对比

el-dialog写在父组件

el-dialog写在子组件

小结

组件的封装我认为要遵循的原则

• 不要使用过多的prop
• 不要轻易更新v-model的值
• watch方法中的内容尽量抽离到具体click或者callback业务上，否则代码多的情况不容易定位是哪里触发了watch方法
• 减少使用watch prop——监听外部传递的prop改变而触发内部代码更新的操作
• 组件抽离尽量精简，业务抽离得彻底，避免父组件反复调用子组件的方法

开发过程中发现一个比较有争议的地方

项目中使用element-ui，经常用到el-dialog组件

那么如果要把弹出对话框的内容封装为一个组件的话，有两种情况

1. el-dialog 写在组件外，由父组件控制显示隐藏
2. el-dialog 写在组件内部，由组件自己维护对话框显示隐藏

本次，就这两种差异发表个人浅见，讨论那种方式更好

Dialog显隐在组件外维护

父组件定义data变量，控制dialog对话框的显隐。而对话框的点击的取消事件也需要通过@方法通知父组件更新显隐状态。

当然，也可以使用v-model 或者:prop.sync的方式，使子组件也可以有改变父组件变量的能力，这样也可以，不过底层实现还是通过@的方式，由子组件通知父组件更新变量，看起来像是数据的反向流动。一般还是建议数据单向流动，减少子组件对父组件变量的修改，尤其是复杂组件。

好处：

而这种方式的好处在于，开发父组件时，可以在使用时决定子组件是否需要弹框，需要弹框就套上弹框代码。适用于偶尔要把这个组件做成弹框的情况。

问题：

对话框状态由父组件控制的情况，少量的话还好，多的时候父组件就难免在data中定义更多“show”的变量，这些变量也会在代码的不同角落被修改，增加了代码耦合度。

Dialog 显隐在组件内维护

个人偏向于写在组件内部，原因是作为对话框弹出时，用户一般是操作不到父组件的内容的，实际上父组件一般只需要一个“打开”对话框的操作，子组件将对话框中的结果传回父组件，关闭对话框的业务逻辑也一般在对话框内进行。

父组件通过调用子组件的show()方法这打开对话框，这个方法也可以传递一些初始参数，以减少prop的使用。

因为我发现在打开对话框时，向组件传递的部分参数，自打开对话框后，父组件一般就不更新这些参数了，不一定要使用prop来传递。

优点：

在抽取这部分参数放到（比如show)方法中传入后，父组件也往往会减少一些data参数的定义（控制show的变量和组件初始化的参数），让父组件业务更加清晰。

问题：

1. 使用组件时，显示对话框的入口函数规范问题，而且由于对话框写在组件内部，使用时不可去掉对话框。
2. el-dialog懒渲染问题，第一次打开时才开始渲染slot中的内容，this.$refs会找不到，解决：1.使用this.$nextTick   2.使用官网的，在el-dialog中@open/@opened回调中操作DOM

同时使用多个Dialog时的代码风格对比

el-dialog写在父组件

父组件代码量显著增多，尤其是有关控制显隐的代码。 

el-dialog写在子组件

组件内的变量组件内部维护，通过内部方法来控制内部变量的改变（show变量），有点借鉴于JAVA面向对象的编程思想。

这种风格也有点像jQuery了，更加直观。

可复用确认组件

通过show方法抛出Promise对象，并保存期resolve,reject方法，并在对话框中的确认，取消事件中执行。这样在父元素就可以通过then链判断对话框是否确认和关闭

封装包

类似ui库一样，提供install方法。这样式样上就类似ui库一样，Vue.use的方式来使用。

import Dialog from 'xxx.vue';
export default function(Vue){Vue.component(Dialog.name, Dialog);
}

 为了便于按需加载组件，也需要将原vue组件代码导出。类似 下面两种方式。

方式1

export { default as Dialog } from 'xxx.vue';

方式2

import Dialog from 'xxx.vue';export default {component: Dialog,install(Vue){Vue.component(Dialog.name,Dialog);}
}

 这样就可以直接获取到组件了。

小结

显然对话框写在子组件内部具有更好的可读性和更低的代码耦合度，使父组件的开发更聚焦于业务逻辑。这也使对话框与子组件业务绑定，无法选择去除对话框。子组件内容初始化需要考虑el-dialog的懒渲染。

对话框由父组件控制则在开发过程中更方便选择是否使用对话框，代价是更高的代码耦合。

以上是一点关于vue对话框的一些小总结，还未完全钻研透彻。比如使用：prop.sync传递参数，控制对话框显示与否，这样也可以在一定程度上减少父组件代码量。

若有错误，敬请指出更正。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！