vue 关于element el-dialog dialogShow的使用心得

从前在写父组件控制子组件内弹窗的dialogShow的时候，基本上会在子组件内用watch去监听props传来的dialogShow，然后在子组件内设置新的标识，再去更新该标识。在子组件内改变dialogShow的时候，再去$emit去改变父组件内dialogShow的值。真的是写的很复杂，代码冗余，一个小操作写这么多代码。后面学到了下面这种写法。

想要在父组件内控制子组件dialog的显示，可在组件上绑定一个显示属性例如:dialogShow.sync="displayShow"

子组件内其实只需要props接收到以后使用computed进行处理，get的时候则获取props的内容，set的时候是重点
使用this.$emit('update:dialogShow', val)可以对组件上所绑定的属性dialogShow直接做更新，并在下一次get的时候可以获取到更新后的dialogShow

父组件内

...
	<someDialog :dialogShow.sync="displayShow"

子组件内

...
props: {
    dialogShow: {
      type: Boolean
    }
  }
...
computed: {
    dialogVisible: {
      get () {
        return this.dialogShow
      },
      set (val) {
        this.$emit('update:dialogShow', val)
      }
    }
  }

只需要这简单的操作，就解决了之前watch和反复emit的问题