子组件监听父组件的值，不生效的问题

场景：把dialog对话框拎出来成业务组件，此子组件监听父组件值的变化，从而显示或者不显示该对话框子组件

问题：当父组件在同一位置多次点击时，子组件对话框只是在第一次切换到该位置时出现一次，后面的不再出现，即子组件监听不生效。

解决方案：让父组件的值变化，这样子组件监听就可以生效了，部分代码如下：

父组件的 <template>里面

<div style="cursor: pointer" @click="noClock">
     <p>弹窗出现</p>
     <p>{{ today || '--' }}</p>
</div>

父组件js部分

    // 弹窗
    noClock() {
        this.typeObj.typeJin = 1 
        this.typeObj = { ...this.typeObj } // 子组件监听不生效的问题
    },

子组件js监听部分

watch: {
    typeObj: {
      // immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue.typeJin === 1) {
          this.visible = true
        }
      }
    }
  },

总结：父组件的值需要变化，子组件才可以监听到，便捷方式之一是重新赋值；比如this.typeObj = { ...this.typeObj }，或者是额外添加一个子属性，用this.$set()对额外的子属性进行赋值，主要是父组件的值需要变化。