昨天晚上上线，作为前端我是左等右等等后端改测试的bug，四个小时过去了，我们前端没有发现任何问题，最后我就被申请先回家睡觉了，作为程序员真是日常呀。。。。
早上第一件事就是昨天晚上发现前端的bug 了你看看，一阵眩晕。
研究了半天不知道代码的问题出在哪里了怎么试试都是bug。
不写了出去转转，灵光闪过我是不是错用了组件了，废话连篇，直接上代码吧。
子组件1item 用于展示每一个列表的每一个项
错误的写法：（@click="playPause(item)"位置注意了）
item 组件
<div class="video-item" @click="playPause(item)"> <div class="video-img"> <video class="mp4" :src="item.videoUrl"></video> <div class="play"></div> <div class="bg"></div> </div> <div class="video-title">{{item.videoName}}</div> </div>问题：click="playPause(item)" 就是为了在组件中打开子组件2，这样的话有一个问题就是子组件嵌套子组件会造成props 传值不断的叠加，这是vue的特点，并不会清空子组件的传值，组件2中的内容永远上一个上上一个的渲染，这样造成声音比较杂乱，这是涉及到视频的内容，可能会有问题，所以就开始反思我对组件的理解了。
video组件：
<el-dialog width="800px" :visible="visible" @update:visible="updateVisible" :close-on-click-modal="false" custom-class="animation" > <div class="control-video" @click="play" v-if="item"> <video class="mp4" id="video" controls="controls" :src="item.videoUrl"></video> </div> </el-dialog>将子组件video 加入父组件，每次点击item组件的时候值就会更换，这就是父子组件的关系吧不多层嵌套，容易出问
父组件展示列表
item 组件 与 video组件：同时放入父级组件，这个时候打开视频就不会有多种声音了
<div class="video-list" v-if="tableData.length>0" > <template v-for="item in tableData"> <div @click="playPause(item)"> <Item:item="item" :key="item.id" /> </div> </template> </div> <Video></Video>注意：click="playPause(item)" 放在父组件中打开子组件是一点问题都没有了，好好理解一下，组件之间的关系。
一份完美的弹窗视频播放就完工了！
觉得自己什么都会了现在我要告诉自己的是：
组件就是一块内容，哪里有需要就放在哪里
