Vue筆記（props和 mounted）

1.mounted

　　1.1mounted中使用$nextTick會導致頁面掛掉

mounted() {
// 頁面卡死
    this.$nextTick(() => {
      this.setUrl()
    })
  }

2.props

　　2.1props傳過去的值，第一時間在mounted是獲取不到的。因為是異步傳值的。

　　解決方法：（1）使用watch；（2）將需要進行的處理在父組件進行操作，然后將操作完的值直接傳給子組件。

watch: {
  datas: function (val) {
     
   }
 }
或
(父)
<examAchSearchHeader :exprotUrl="exprotUrl"></examAchSearchHeader>
...
this.exportUrl = XXXX
(子)
props: {
    exportUrl: String
}

　　2.2通過props傳給子組件的值變化后子組件接收到 和 通過refs訪問子組件方法中使用接收到的參數變化的順序問題

　　通過refs訪問時，接收到的參數是變化前的參數。還是因為異步的問題。可以強制賦值改變，或用watch等。

// parent
<examAchTable ref="achTable" :dataList="examAchList"></examAchTable>

// 若這里不強制賦值一下，在examAchList變化后直接調用子組件的transData方法時，子組件dataList仍是變化前的值
this.$refs.achTable.dataList = this.examAchList
this.$refs.achTable.transData(res.data.totalRecord)

// child
transData(total) {
      if (this.dataList) 
    // ...
}

持續更新中...