组件传值

    <video
          ref="video"
          id="video"
          :src="videoUrl"
          playsinline="true"
          webkit-playsinline="true"
          @canplaythrough="playThrough"
        ></video>
      </div>
      <div class="play-video" v-show="staute">
        <div class="v-img" @click="clickVideo">
          <img src="../../common/images/play.png" alt>
          <span>00'{{Math.floor(timer-0)}}"</span>
        </div>
      </div>
      <div class="progress-bar" v-show="!staute">
        <div class="left-bar" @click="clickChangeVideo">
          <div class="stop-bar" v-show="stautepaly">
            <img src="../../common/images/stop-bar.png" alt>
          </div>
        </div>
      </div>    

在组件外部修改视频的路径

data() {
    return {
      videoUrl: "../../../static/video/video.mp4",
      staute: true,
      stautepaly: true
    };

// 命名不一样的名字
 props: {
   src: {
     type: String
   },
   status:{
     type:Boolean
   },
   statuspaly: {
     type:Boolean
   }
 },
 watch:{
   status(value){
     this.staute = this.status;
   },
   statuspaly(value) {
     this.stautepaly = this.statuspaly;
   }
 },
mouted(){
   let that = this;
   that.videoUrl = that.src;
   that.staute = that.status;
   that.stautepaly = that.statuspaly;
}

用到的页面

<Video :src="'../../../static/video/cat.mp4'" :status="status" :stautepaly="stautepaly"></Video>

 data() {
    return {
      stautepaly: true,
      status:true,
      stautepaly: true,
    };
  }

之后修改就跟在这个页面修改其他值一样的修改即可