Invalid prop: type check failed for prop "xxx". Expected Number, got String.

在子組件progress-circle.vue的template中的定義如下：

 <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg>

在子組件progress-circle.vue的script中的props：radius和percent都是從父組件傳遞過來的數據

props: {
    radius: {
      type: Number,
      default: 100
    },

    percent: {
      type: Number,
      default: 0
    }

  }

父組件player.vue中引用progress-circle子組件

<progress-circle radius="32" :percent="percent">

然后就報上面的錯誤了。

分析：由於radius是從父組件傳遞給子組件的數據，在父組件中定義的時候是直接定義一個變量而不是綁定一個變量，那么當傳遞給子組件的時候這個變量的值是一個字符串。但是在子組件中radius的類型是number，因此該變量應該還是要綁定傳給子組件的。

解決的方法：只需要在父組件中做改變，在父組件中的定義如下

<progress-circle :radius="radius" :percent="percent">

在父子間中的data中定義一個變量radius,如下所示

 data() {
    return {
      //防止快速點擊造成的bug
      songReady: false,
      currentTime: 0,
      radius: 32
    }

  }