Element-UI el-dialog 二次封装复用

我很希望项目中可以多接触一些新东西，实践出真知，对于编程来说就是要多动手，多总结几录，多思考，才能更好的避坑，因为动手了会发现好多你以为的不是你以为的。

概述

PC 端项目中，一直使用的是Element UI ,最近功能迭代，有一个选择专家的弹窗在多个页面应用到，因此需要将dialog进行封装以便复用，在Element-UI 的基础上，对dialog 进行封装，最重要的是一个属性值的控制 即 visible，对于dialog 中要显示哪些内容，按照一般组件传过来就可以了。

核心问题

el-dialog 的 visibile 属性值 只能在父组件或者子组件中一个进行修改，父组件传给子组件的属性值不能在子组件中直接进行修改，这是VUE 比较介意的。如果在子组件中直接修改就会报以下错误。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogFormVisible"

found in

---> at src/views/packageDialog/MyDialog.vue
        at src/views/packageDialog/dialogDemo.vue
          at src/App.vue
           

问题解决

父组件传给dialog 子组件的 属性值 不直接使用在visible 属性值上，取另外的值与其同步

在dialog 子组件中 通过watch 监听父组件中传值的变化，进行同步

子组件中需要关闭dialog 时，同样要触发父组件中的时间，修改父组件中定义的控制dialog 显示的值

核心代码如下:

    dialogShow(val) {

      this.dialogFormVisible = val

    }

  },

  methods: {

    closeDialog() {

      this.$emit('dialogShowChange', false)

    }

  }

整体Demo 代码

父组件：

dialog 子组件：

最终，要记住问题得本质，及这类问题得解决，希望不断采坑不断进步。