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


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

    在父组件定义一个变量,初始化是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 } }, }
  • 相关阅读:
    Spring Security -- 添加图形验证码(转载)
    Spring Security -- 自定义用户认证(转载)
    pandas agg 后降低df表层
    判断是否有人跟踪车辆的方案
    格隆汇笔记-黄勇演讲
    Mac mysql 忘记root密码的解决方法
    sql 同步2个表中的一个字段数据
    Linux下配置用msmtp和mutt发邮件
    spark StructType的应用,用在处理mongoDB keyvalue
    Idea2018旗舰版破解方法
  • 原文地址:https://www.cnblogs.com/florazeng/p/13552084.html
Copyright © 2020-2023  润新知