做一个双击打开弹窗的功能,因为别的组件中也用到弹窗中的内容,所以就将弹窗提出来做一个公共的组件。但是遇到的问题是,如果我两次都双击同一个文件,第二次就会触发不了监听事件。我的解决方式:
在父组件定义一个变量,初始化是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 } }, }