子组件监听父组件的传值,如果两次传入同一个值,触发不了监听事件

做一个双击打开弹窗的功能,因为别的组件中也用到弹窗中的内容,所以就将弹窗提出来做一个公共的组件。但是遇到的问题是,如果我两次都双击同一个文件,第二次就会触发不了监听事件。我的解决方式:

在父组件定义一个变量,初始化是0,双击的方法中变量自加,然后在子组件中监听这个变量

父组件

<common-dialog :fileType="fileType" :fileId="fileId" :num = "num"></common-dialog>

<script>
    data() {
      return {
          num: 0
      }
    }, 
    nextFolder(fileId, fileType) {
      this.num++;
      this.fileType = fileType;
      this.fileId = fileId;
      if (fileType == 0) {
          this.temp = [];
          this.oldParentId = this.queryForm.parentId;
          if (fileId == 0) {
              this.queryForm.fileType = 0;
              this.queryForm.parentId = undefined;
          } else {
              this.queryForm.fileType = undefined;
              this.queryForm.parentId = fileId;
          }
          this.getList(this.temp);
      }
    }
 </script>

子组件:

export default {
    props: ['fileType', 'fileId', 'num'],
    watch: {
        num: {
            handler(newVal, oldVal) {
                if (!newVal) {
                    return;
                }
                switch (this.fileType) {
                  case 1:
                      this.picVisible = true;
                      this.picSrc = showVideo(this.fileId);
                      break;
                  case 2:
                      this.getPdfCode(fileId);
                      break;
                  case 3:
                      this.videoVisible = true;
                      this.videoSrc = showVideo(this.fileId);
                      break;
                  case 5:
                      this.audioVisible = true;
                      this.audioSrc = showVideo(this.fileId);
                      break;
                }
            }, 
       deep:
true } }, }

 

posted @ 2020-08-24 09:32  上官兰雨  阅读(785)  评论(0编辑  收藏  举报