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


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

    在父组件定义一个变量,初始化是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 } }, }
  • 相关阅读:
    nginx配置tcp反向代理
    C#异步编程
    sqlserver reporting service造成cpu某核占用100%
    tomcat部署多网站
    在asp.net中开启后台任务,Quartz.NET说明
    ganglia
    docker 容器中的DNS 问题
    awk 变量梳理
    strace 命令
    shell 中处理json 格式的工具
  • 原文地址:https://www.cnblogs.com/florazeng/p/13552084.html
Copyright © 2020-2023  润新知