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對象

}