问题描述

子组件，定义了空data值，通过参数传递过来，通过watch修改，页面不更新，日志输出确定内容已经改过来。

已经测试方案

找了很多方案，this.$forceUpdate()、this.$nextTick().then(() =>{})、setTimeout、深度克隆、this.$set()均无效

终极解决方案

这里只展示脚本部分

<script>
  export default {
    components: {},
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      data: {
        type: Object,
        default: null,
      },
    },
    data() {
      return {
        formData: {},
        rowData: {},
        drawerShow: false,
        confirmLoading: false,
      }
    },
    computed: {
      tmpData: {
        get: function () {
          let configData = this.data.config
          let fromData = { ident: this.data.ident }
          fromData = Object.assign({}, fromData, configData)
          return fromData
        },
        set: function (value) {
          this.fromData = value
        },
      },
    },
    watch: {
      tmpData(val) {
        this.formData = val
      },
      data(val) {
        this.rowData = val
      },
      show(val) {
        this.drawerShow = val
      },
    },
    beforeCreate() {
    },
    created() {},
    mounted() {
    },
    methods: {
      drawerClose() {
          //父组件要通过 :show.sync调用才生效
        this.$emit('update:show', false) //自定义事件会告诉父组件将父组件的 show值改为false，并传回给子组件。
      },
      clickSubmit() {

      }

      clickCancel() {
        this.drawerClose()
        this.$emit('cancel')
      },
    },
  }
</script>

代码解析：页面上用到的是formData，直接通过watch中的data监听修改formData无效，所以在computed中，加入了tmpData作为中间值，然后在watch中监听tmpData的变化，将变化值交给formData，然后就没问题了。