vue props傳值失敗 輸出undefined

 

背景：父組件傳值給子組件，子組件通過props接收父組件的值，但是在vue中 子組件通過props獲取到的值為undefined？

 

因為vue語法中規定HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。

這意味着當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：

例子一：

<Children :data = "goodId" />

<!-- 因為html不區分大小寫，所有值都會轉化為小寫，所以會獲取不到值。 -->

<Children :data = "good-id" />

 

例子二：

請注意：以下代碼中data值不能使用駝峰命名，否則會導致傳值失敗。

父組件：

<!-- html結構中 -->
<GoodRecommend :recommendid="data" />

<!-- vue實例中 -->

 data() {

    return {

　　data：“1”

　　}

 }，

子組件：

 props: {
    recommendid: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    this.getFeath();
  },
  methods: {
    getFeath() {
    
      let categoryId = this.recommendid; //獲取商品id
      console.log("categoryId", categoryId);//獲取父組件傳來的值（recommendid：1）

} }

請移步vue文檔