Vue 相關難點匯總


1. 父子組件的雙向數據綁定,所以在子組件是不允許修改父組件的屬性的。
// 解決辦法
// 在子組件data中定義一個父組件傳遞過來的副本,再把該副本利用this.$emit("","")給傳回去,父組件利用自定義事件接受該值
 
2. props 的   數組/對象的默認值應當由一個工廠函數返回
錯誤類型:
解決辦法:
 
3.子組件拋出值 this.$emit('input',  val)  ,  input 方法, 父組件接收可以用v-model="val"  
 
4.  v-for  dom 的獲取
方法一:this.$ref['t' + $indx]
方法二: 
 
 
5. 后端配置 history模式
nginx:
nginx.config 文件配置

 

6.前端axios下載excel (二進制) 
step1: 后端設置 content-type: application/octet-stream
 
 
 
 
step2:  修改axios請求的responseType為blob
 
 
 
step3:  .vue 文件methods里邏輯代碼如下:
downloadExcel(data) {
    if (!data) return;
    // 創建下載的鏈接
    let url = window.URL.createObjectURL(new Blob([data]), {
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' 
    })
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    // 下載后文件名
    link.setAttribute('download', `日報.xlsx`)
   document.body.appendChild(link)
   //點擊下載
   link.click()
   document.body.removeChild(link); //下載完成移除元素
   window.URL.revokeObjectURL(url); //釋放掉blob對象

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM