鍍金池/ 問答/HTML/ vue使用prop傳遞數(shù)值，子組件沒有獲取到數(shù)值

vue使用prop傳遞數(shù)值，子組件沒有獲取到數(shù)值

現(xiàn)有一個父組件和一個子組件，

在父組件中，從數(shù)據(jù)庫獲取了一個數(shù)據(jù)，存入了一個map中，

然后將這個數(shù)據(jù)props給子組件，子組件是一個地圖，在生命周期mounted上面直接初始化地圖以及使用了props的屬性來加載mark點。

但是發(fā)現(xiàn)地圖加載了，mark點沒有加載，最后發(fā)現(xiàn)，是由于子組件mounted初始化的時候，props的屬性還沒有數(shù)值。

這個問題怎么解決：

父組件 從數(shù)據(jù)庫獲取數(shù)據(jù)

      /* 從數(shù)據(jù)庫獲取初始設備位置數(shù)據(jù)*/
      async initWzDataFromServer() {
        let data = await getInitData() || []
        data.result.map(item => {
          this.wzSocket.set(item.deviceSn, item)
        })
      },

傳遞給子組件

 <MapMark :initWzData="wzSocket"/>

子組件獲取props

          init() {
        this.initMap()
        this.initMarkerData()
      },


    mounted() {
      this.init()
    },

希望各位可以幫幫忙

補充這是watch

    watch: {
      /* 如果initWzData更新了那么就重新標記點*/
      localWzData: function (newValue) {
        this.initMarkerData()
        // for (let value of newValue.values()) {
        //   console.log(value)
        // }
      }
    },

這是data

    data() {
      return {
        map: null,
        localWzData: this.initWzData
      }
    },
回答
編輯回答
舊城人

我也剛遇到類似的問題，

2018年3月8日 14:39
編輯回答
墨沫

用 watch，參考文檔 偵聽器。

2017年11月19日 15:04
編輯回答
冷溫柔

給子組件使用v-if來確保prop的屬性有值后才開始渲染

2018年4月8日 00:43
編輯回答
夕顏

問題解決了，主要是因為我的數(shù)據(jù)結構使用的是map，所以沒法監(jiān)測到變化，后面我把map換成了數(shù)組，可以監(jiān)測是獲取到數(shù)據(jù)了

2018年3月5日 12:33
編輯回答
吢涼
async initWzDataFromServer() {
  let data = await getInitData() || []
  this.wzSocket = new Map(
    data.result.map(item => [item.deviceSn, item])
  )
},
2018年2月9日 23:36
編輯回答
浪婳
console.log('還有這種問題')
2017年12月7日 21:45