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

父组件值变化触发子组件对话框监听

最新推荐文章于 2025-03-13 19:24:02 发布

原创最新推荐文章于 2025-03-13 19:24:02 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #vue.js

前端专栏收录该内容

31 篇文章

订阅专栏

本文探讨了如何解决父组件多次点击导致子组件对话框仅显示一次的问题，关键在于确保父组件值的动态更新，通过深拷贝或额外属性赋值实现监听。

场景：把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()对额外的子属性进行赋值，主要是父组件的值需要变化。