vueJs

Vue.js 監聽屬性 watch

專案案例：當用戶輸入事件觸發,tableFormTableDataChange數值改變，呼叫其回撥函式

data:{
  retrun {
    tableFormTableDataChange: 0
  }
}
watch: {
  'tableFormTableDataChange': function () { // 監聽表格資料變化
     const tableFormTableData = this.tableForm.tableData
     let totalPurchaseAmount = 0
     tableFormTableData.forEach(item => {
       if (item.amount) {
         totalPurchaseAmount += Number(item.amount)
     }
     this.$set(this.contractForm, totalPurchaseAmount,Number(totalPurchaseAmount.toFixed(2)))
   })
}
methods:{
  使用者輸入觸發事件：{
    this.tableFormTableDataChange +=1
  }
}
 

參考文章

總結：
1.使用 watch 來實時監聽屬性變化
2.鍵值形式 鍵是data中的需要監聽的資料 值是一個回撥函式
3.鍵發生變化時，就是呼叫回撥函式

Vue.js this.$set

參考文章

總結：
1.如果data物件裡面的陣列、物件例項資料建立之後，其屬性數值變化或者增添、刪除屬性,不會觸發檢視更新
2.屬性必須在 data 物件上它才是響應的,不允許動態新增根級響應式屬性。
3.this.$set和Vue.set原理幾乎是一樣的
4.this.$set的作用就是動態新增更新響應式屬性
使用方法
this.$set(Array,"key",newValue)
this.$set(object, "propertyName", newValue)

路由 route 和 router

參考文章

Vuex狀態管理器

參考文章

VueJs(ref和$refs的使用)

參考文章
總結：

1.ref相當於是給Dom元素起別名，這個是唯一的
2.可以通過$refs.別名來獲取到整個Dom元素
3.子元件中的ref會註冊到父元件的refs中，可以通過vm屬性檢視，父組鍵可以通過this.$refs.子元件的ref來訪問子元件

父子元件通訊

參考文章
總結：

1.父元件通過this.$refs來訪問子元件
2.父元件通過子元件定義的props屬性結合 v-bind 來傳遞資料給子元件
3.子元件可以通過this.$emit傳遞事件給父元件，父元件通過v-on來監聽