--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- ### 封装`el-dialog`为一个组件我们在使用`element-ui`的时候，如果一个弹窗中的内容很多，那么我们经常会把**这个弹窗封装成一个组件**，如下： ```html ``` ```js // DetailDialog.vue js ``` ### `el-dialog`会修改 props，并报错但是这样会有一个问题，**当触发了`el-dialog`内部的关闭事件时**，比如点击弹窗阴影等， **它会`emit`事件来修改当前组件的`props [visible]`**，由于组件不能直接修改`prop`属性，然后就会报错。 #### 我们新增了一个中间变量`innerVisible`，来拦截`props [visible]`的修改和获取 ```html ``` ```js // DetailDialog.vue js ``` 这样在`el-dialog`内部修改`prop[visible]`的时候，我们会通过`emit('update:')`的方式来通知父组件，避免直接修改props。当然父组件需要加上[sync修饰符](https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6)来接受修改： ```html ``` 到此为止，封装的弹窗组件已经没有问题了。 ### 继续优化，使用[v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)控制显示隐藏 ```js // DetailDialog.vue js ``` 接入了`v-model`，使用起来就更**高大上**而且**整洁**了 ```html ``` ### 继续优化，封装成mixins 当**频繁封装弹窗组件时**，那么上述逻辑也需要不停地复制，所以继续优化，把上述**控制显示隐藏的逻辑封装成了`mxins`**，直接复用即可 ```js // vModelDialog.js export default { model: { prop: 'visible', event: 'toggle' }, props: { visible: { type: Boolean, default: () => { return false } } }, computed: { innerVisible: { get: function() { return this.visible }, set: function(val) { this.$emit('toggle', val) } } } } ``` 那么封装弹窗插件时，只需引入`mixins`即可完成显示隐藏逻辑。 ```js // DetailDialog.vue js ``` ### 懒人提效系列： > >[面对重复的代码、逻辑，如何提高开发效率](https://juejin.cn/post/6967098818957410318) > >[使用类名，高效快捷的进行flex布局](https://juejin.cn/post/6940062321007919111) > >[业务常量的简洁使用方案：消除恶心的find与魔法值](https://juejin.cn/post/6979926111316606983)