關(guān)于vue父向子組件傳參和更新的

1.從視頻列表點(diǎn)擊進(jìn)入視頻詳情頁，通過路由傳參過來。拿到參數(shù)后，獲取視頻詳情并傳值給播放器子組件。
2.播放器子組件創(chuàng)建播放器失敗，我在創(chuàng)建播放器的方法中打印了下數(shù)據(jù)發(fā)現(xiàn)是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, // 視頻是只有這一個(gè)參數(shù)，直播只有下面兩個(gè)參數(shù)
      'm3u8': this.movMsg.hlsPlay,
      'flv': this.movMsg.flvPlay,
      'autoplay': false,
      'coverpic': {'style': 'default', 'src': this.movMsg.pictureurl ? this.movMsg.pictureurl : this.movMsg.coverPicture}, // 這里判斷視頻的圖是不是空，不是空那就是視頻的圖，空的話那么就是直播的參數(shù)
      'width': '100%',
      'height': '100%',
      'wording': {
        2032: '網(wǎng)絡(luò)錯(cuò)誤',
        2048: '請(qǐng)求視頻失敗',
        12: '請(qǐng)?zhí)顚懸曨l播放地址',
        13: '直播已經(jīng)結(jié)束',
        2: '直播已經(jīng)結(jié)束'
      }
    })
  })
}
  },
  mounted () {
    this.setPlayer()
  }

3.于是我在父組件中的數(shù)據(jù)請(qǐng)求成功時(shí)調(diào)用子組件的創(chuàng)建方法，這樣看上去沒問題了。但是~
我現(xiàn)在在父組件下面有一排視頻列表點(diǎn)擊路由參數(shù)變視頻信息也應(yīng)該變，這里我使用了watch監(jiān)聽路由，檢測到路由變化就調(diào)用獲取數(shù)據(jù)和子組件的創(chuàng)建播放器，于是我每次切換視頻都會(huì)創(chuàng)建一個(gè)播放器。。。

所以我現(xiàn)在認(rèn)為這個(gè)創(chuàng)建的方法還是應(yīng)該在子組件自身實(shí)現(xiàn)，但是因?yàn)椴荒芗皶r(shí)拿到父組件的傳值會(huì)創(chuàng)建失敗。
還有就是我路由更新的時(shí)候調(diào)用接口獲取了數(shù)據(jù)，更新了父對(duì)子組件的傳值，子組件怎樣才能切換數(shù)據(jù)呢？

以上是我的問題和一點(diǎn)思考，請(qǐng)大神們指正下我該怎么做。
我下午試了下在子組件的watch監(jiān)聽父組件的傳值，然后傳給播放器，也不管用。。。

回答

編輯回答

話寡

今天又測試了下，使用vue-devtools發(fā)現(xiàn)子組件接收到的值是更新的，那么就是我watch寫的不對(duì)。仔細(xì)查閱發(fā)現(xiàn)watch檢測對(duì)象的話，需要調(diào)用handler

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

這樣每次數(shù)據(jù)確實(shí)都是刷新的，并且切換可以創(chuàng)建新的實(shí)例~嗯于是問題和在父組件調(diào)用是一樣的，又創(chuàng)建了一大堆播放器。

    methods: {
        setPlayer () {
          this.$nextTick(() => {
    // console.log(this.movMsg.videourl)
    // eslint-disable-next-line
    const player = new TcPlayer('player', {
      'mp4': this.movMsg.videourl, // 視頻是只有這一個(gè)參數(shù)，直播只有下面兩個(gè)參數(shù)
      'm3u8': this.movMsg.hlsPlay,
      'flv': this.movMsg.flvPlay,
      'autoplay': false,
      'coverpic': {'style': 'default', 'src': this.movMsg.pictureurl ? this.movMsg.pictureurl : this.movMsg.coverPicture}, // 這里判斷視頻的圖是不是空，不是空那就是視頻的圖，空的話那么就是直播的參數(shù)
      'width': '100%',
      'height': '100%',
      'wording': {
        2032: '網(wǎng)絡(luò)錯(cuò)誤',
        2048: '請(qǐng)求視頻失敗',
        12: '請(qǐng)?zhí)顚懸曨l播放地址',
        13: '直播已經(jīng)結(jié)束',
        2: '直播已經(jīng)結(jié)束'
      }
    })
      })
    }
  },
所以我想應(yīng)該是我每次實(shí)例化新的播放器對(duì)象之前先把原來的銷毀。但是我試了幾次都找不到這個(gè)對(duì)象呢。。

最終用了一個(gè)比較浪的方法
給播放器的容器加ref 然后在每次創(chuàng)建前