关于vue父向子组件传参和更新的

Question

1.从视频列表点击进入视频详情页，通过路由传参过来。拿到参数后，获取视频详情 并传值给播放器子组件。
2.播放器子组件创建播放器失败，我在创建播放器的方法中打印了下数据发现是undfine

export default {
  props: {
movMsg: {
  type: Object
}
  },
  methods: {
setPlayer () {
  this.$nextTick(() => {
    console.log(this.movMsg.videourl)
    // eslint-disable-next-line
    const player = new TcPlayer('player', {
      'mp4': this.movMsg.videourl, // 视频是只有这一个参数，直播只有下面两个参数
      'm3u8': this.movMsg.hlsPlay,
      'flv': this.movMsg.flvPlay,
      'autoplay': false,
      'coverpic': {'style': 'default', 'src': this.movMsg.pictureurl ? this.movMsg.pictureurl : this.movMsg.coverPicture}, // 这里判断视频的图是不是空，不是空那就是视频的图，空的话那么就是直播的参数
      'width': '100%',
      'height': '100%',
      'wording': {
        2032: '网络错误',
        2048: '请求视频失败',
        12: '请填写视频播放地址',
        13: '直播已经结束',
        2: '直播已经结束'
      }
    })
  })
}
  },
  mounted () {
    this.setPlayer()
  }

3.于是我在父组件中的数据请求成功时调用子组件的创建方法，这样看上去没问题了。但是~
我现在在父组件下面有一排视频列表 点击路由参数变视频信息也应该变，这里我使用了watch监听路由，检测到路由变化就调用获取数据和子组件的创建播放器，于是我每次切换视频都会创建一个播放器。。。

所以我现在认为这个创建的方法还是应该在子组件自身实现，但是因为不能及时拿到父组件的传值会创建失败。
还有就是我路由更新的时候调用接口获取了数据，更新了父对子组件的传值，子组件怎样才能切换数据呢？

以上是我的问题和一点思考，请大神们指正下我该怎么做。
我下午试了下 在子组件的watch监听父组件的传值，然后传给播放器，也不管用。。。

Answer 1

今天又测试了下，使用vue-devtools发现子组件接收到的值是更新的，那么就是我watch写的不对。仔细查阅发现watch检测对象的话，需要调用handler

  watch: {
    movMsg: {
      handler (newValue, oldValue) {
        console.log(newValue)
        this.setPlayer()
      }
    }
  },

这样每次数据确实都是刷新的，并且切换可以创建新的实例~嗯 于是问题和在父组件调用是一样的，又创建了一大堆播放器。

    methods: {
        setPlayer () {
          this.$nextTick(() => {
    // console.log(this.movMsg.videourl)
    // eslint-disable-next-line
    const player = new TcPlayer('player', {
      'mp4': this.movMsg.videourl, // 视频是只有这一个参数，直播只有下面两个参数
      'm3u8': this.movMsg.hlsPlay,
      'flv': this.movMsg.flvPlay,
      'autoplay': false,
      'coverpic': {'style': 'default', 'src': this.movMsg.pictureurl ? this.movMsg.pictureurl : this.movMsg.coverPicture}, // 这里判断视频的图是不是空，不是空那就是视频的图，空的话那么就是直播的参数
      'width': '100%',
      'height': '100%',
      'wording': {
        2032: '网络错误',
        2048: '请求视频失败',
        12: '请填写视频播放地址',
        13: '直播已经结束',
        2: '直播已经结束'
      }
    })
      })
    }
  },
所以我想应该是我每次实例化新的播放器对象之前先把原来的销毁。但是我试了几次都找不到这个对象呢。。

最终用了一个比较浪的方法
给播放器的容器加ref 然后在每次创建前

    this.$refs.player.innerHTML = ''

不论如何 总算实现了。。。。