从前在写父组件控制子组件内弹窗的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的问题

Logo

前往低代码交流专区

更多推荐