vue中關(guān)于template報錯等問題的解決
更新時間：2022年04月26日 11:54:40 作者：伊丶二
這篇文章主要介紹了vue中關(guān)于template報錯等問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
template報錯
寫這個純粹是為了紀(jì)念有多蠢
template:` <div class='app'> ?? ?<button ref = 'btn'>我是按鈕1</button> ?? ?<subCom ref = 'subc'></subCom> </div> ?? ?`,
關(guān)于template里面寫的HTML，經(jīng)歷了報錯，控制臺反映字符串不齊，語法錯誤等一系列問題后，查遍了各種博客，在查看別的框架的源碼后，才發(fā)現(xiàn)語法沒有問題，js導(dǎo)入沒有問題，有問題的是
template里面，用的是``
就是數(shù)字1旁邊的`，不是單引號?。?！
就這個我嘗試查詢了一個多小時的bug。。。
vue報錯問題
The template root requires exactly one element
這段話的意思是：根模板必須有一個準(zhǔn)確的元素。
在vue組件中會使用template標(biāo)簽，在template中，還需要一個標(biāo)簽元素將其他標(biāo)簽元素包裹起來，因為template標(biāo)簽是不會被DOM解析，生成DOM元素的時候會被隱藏，而組件又必須只能有一個根節(jié)點。
//helloWorld.vue //正確寫法 <template> ?? ?<div> ?? ??? ?<h1>我是h1</h1> ?? ??? ?<h1>我是h1</h1> ?? ??? ?<h1>我是helloWorld</h1> ?? ?</div> </template> //錯誤寫法,會報錯。 <template> ?? ?<h1>我是h1</h1> ?? ?<h1>我是h1</h1> ?? ?<h1>我是helloWorld</h1> </template>
這種最外層標(biāo)簽元素只能有一個的方式跟React中的組件用法一致。
React中render函數(shù)return組件的時候，最外層也必須只能有一個標(biāo)簽元素，將其他標(biāo)簽嚴(yán)肅包裹起來，否則會報錯。
//helloWorld.jsx
render(){
?? ?return(
?? ??? ?<div>
?? ??? ??? ?<h1>我是h1</h1>
?? ??? ??? ?<h1>我是h1</h1>
?? ??? ??? ?<h1>我是helloWorld</h1>
?? ? ??? ?</div>
?? ?)
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了手把手帶你封裝一個vue component第三方庫，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要為大家詳細介紹了Vue分頁器組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了el-tooltip根據(jù)條件控制顯示的示例代碼,包括列表型和樹狀圖型,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開發(fā)需求，感興趣的朋友可以了解下2020-10-10
本文介紹了Vue3+Vite+Ts搭建腳手架的實現(xiàn),步驟包括創(chuàng)建項目、選擇技術(shù)棧、安裝依賴及運行項目,旨在為開發(fā)者提供一個簡易快速的搭建流程,感興趣的可以了解一下2024-11-11
本文主要介紹了vue中ref實現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
本文是腳本之家小編給大家整理的vue組件傳值幾種常用方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue引入css文件導(dǎo)致全局污染的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中Form 表單的 resetFields() 失效原因及問題解決
在Vue項目中,使用formRef.value.resetFields()方法重置表單時可能遇到不起作用的問題,下面就來介紹一下如何解決,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Vue?props傳遞的類型和寫法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07