vue中template報錯問題怎么解決

這篇文章主要講解了“vue中template報錯問題怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue中template報錯問題怎么解決”吧！

template報錯

寫這個純粹是為了紀念有多蠢

template:`
<div class='app'>
    <button ref = 'btn'>我是按鈕1</button>
    <subCom ref = 'subc'></subCom>
</div>
    `,

關于template里面寫的HTML，經歷了報錯，控制臺反映字符串不齊，語法錯誤等一系列問題后，查遍了各種博客，在查看別的框架的源碼后，才發現語法沒有問題，js導入沒有問題，有問題的是

template里面，用的是``

就是數字1旁邊的`，不是單引號?。?！

就這個我嘗試查詢了一個多小時的bug。。。

vue報錯問題

The template root requires exactly one element

這段話的意思是：根模板必須有一個準確的元素。

在vue組件中會使用template標簽，在template中，還需要一個標簽元素將其他標簽元素包裹起來，因為template標簽是不會被DOM解析，生成DOM元素的時候會被隱藏，而組件又必須只能有一個根節點。

//helloWorld.vue
//正確寫法
<template>
    <div>
        <h2>我是h2</h2>
        <h2>我是h2</h2>
        <h2>我是helloWorld</h2>
    </div>
</template>
//錯誤寫法,會報錯。
<template>
    <h2>我是h2</h2>
    <h2>我是h2</h2>
    <h2>我是helloWorld</h2>
</template>

這種最外層標簽元素只能有一個的方式跟React中的組件用法一致。

React中render函數return組件的時候，最外層也必須只能有一個標簽元素，將其他標簽嚴肅包裹起來，否則會報錯。

//helloWorld.jsx
render(){
    return(
        <div>
            <h2>我是h2</h2>
            <h2>我是h2</h2>
            <h2>我是helloWorld</h2>
          </div>
    )
}

感謝各位的閱讀，以上就是“vue中template報錯問題怎么解決”的內容了，經過本文的學習后，相信大家對vue中template報錯問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！