父组件传值到子组件 props 子组件data未变化

到底是什么问题呢，一句话说不清，见图就明白了。

父组件 index.vue

      <player
        :play-type.sync="playType"></player>

子组件player.vue

 props: {
    playType: { type: String, default: 'video/mp4' }
  },

data() {
    return {
            type: this.playType,
      }
    }

提问，为什么我父组件值变化后，data里的值没有相应变化。我百度搜不出满意的答案，VUE已经用了2年了，是该好好思考了。

1.Vue页面初始化时，data里的值type 就已经创建了，它的值是初始值 video/mp4'

2.按照VUE的子监听父属性，正确要用watch，然后作出相应行为，直接放在data里，data里的数据已经在第一次初始化就成型了，data里的数据不能直接感知prop的数据变化，要通过watch.

大概就是这样的一个意思，我测试过，就是props的type变化了，data.type还是初始值。无法感知它的变化从而改变type值。所以要用watch,watch刚好能解决这方面的问题 ，下面附上解决方案

 watch: {
    playType(val, oldVal) {
      if (val === oldVal) {
        return
      }
     // alert(val + '  ==  ' + this.playType + '   ==  ' + this.playerOptions.sources[0].type)

      this.playerOptions.sources[0].type = val
    }
  }