在template使用scope屬性時可能會出現波浪線或者編譯時提示錯誤,但最終的編譯結果正常,其實這是ESlint插件檢查語法規范所致,該問題並不會影響程序的正常運行。
(一)在scope屬性值下方出現紅色波浪線,如下圖所示:
它表明scope這變量已經定義了,但是從未被使用過。
(二)編譯提示錯誤,如下圖所示:
其實,在該錯誤的下方給出了修改策略,如下圖所示:
我們可以根據提示命令進行屏蔽編譯過程的錯誤。
(三)命令的使用
在代碼中我們可以利用命令來屏蔽一些語法規范的檢查,如 eslint-disable-next-line和eslint-disable,注意了這些命令必須要采用注釋的方式使用。
(1)eslint-disable命令的使用
eslint-disable命令表示會將該命令所在行后面的所有文件進行語法規范檢查屏蔽,若遇到eslint-enable命令就會結束屏蔽。
- 若想屏蔽整個文檔的語法規范檢查,那么在文件的開頭直接使用eslint-disable命令,在Vue文件的template標簽中這樣使用:<!-- eslint-disable -->,在script標簽中這樣使用: /* eslint-disable */
- 若想屏蔽某段代碼的語法規范檢查,那么就結合eslint-disable和eslint-enable命令,在Vue文件的template標簽中這樣使用:<!-- eslint-disable --> 和 <!-- eslint-enable>兩個命令將某段代碼塊包住,在script標簽中這樣使用:/* eslint-disable */ 和 /* eslint-enable */ 兩個命令將某段代碼塊包住。
(2)eslint-disable-next-line命令的使用
eslint-disable-next-line命令表示該命令所在行的下一行的代碼規范被屏蔽檢查了。
- 在Vue文件的template標簽中這樣使用:<!-- eslint-disable-next-line -->
- 在Vue文件的script標簽中這樣使用: // eslint-disable-next-line
(四)修改示例
這樣修改后再次編譯,結果顯示沒有錯誤提示了。
(五)Vue新版本中還可以這樣修改
用slot-scope屬性代替scope屬性,修改如下圖所示:
這樣修改后,也許你不會遇到編譯錯誤了,不過也有些同學還是出現編譯錯誤,此時你就按照上述的方式來屏蔽吧。