关于vue组件的深入认识,制作一个完美的弹窗视频播放

昨天晚上上线，作为前端我是左等右等等后端改测试的bug，四个小时过去了，我们前端没有发现任何问题，最后我就被申请先回家睡觉了，作为程序员真是日常呀。。。。

早上第一件事就是昨天晚上发现前端的bug 了你看看，一阵眩晕。

研究了半天不知道代码的问题出在哪里了怎么试试都是bug。

不写了出去转转，灵光闪过我是不是错用了组件了，废话连篇，直接上代码吧。

子组件1item 用于展示每一个列表的每一个项

错误的写法：（@click="playPause(item)"位置注意了）

item 组件

      

        
        

        

      
      
{{item.videoName}}
    

问题：click="playPause(item)" 就是为了在组件中打开子组件2，这样的话有一个问题就是子组件嵌套子组件会造成props 传值不断的叠加，这是vue的特点，并不会清空子组件的传值，组件2中的内容永远上一个上上一个的渲染，这样造成声音比较杂乱，这是涉及到视频的内容，可能会有问题，所以就开始反思我对组件的理解了。

video组件：

将子组件video 加入父组件，每次点击item组件的时候值就会更换，这就是父子组件的关系吧不多层嵌套，容易出问

父组件展示列表

item 组件 与 video组件：同时放入父级组件，这个时候打开视频就不会有多种声音了

注意：click="playPause(item)" 放在父组件中打开子组件是一点问题都没有了，好好理解一下，组件之间的关系。

一份完美的弹窗视频播放就完工了！

觉得自己什么都会了现在我要告诉自己的是：

组件就是一块内容，哪里有需要就放在哪里