vue3 0允許乙個元件有多個根節點

2022-05-03 03:27:07 字數 360 閱讀 6975

vue3.0  ast 物件根節點其實是乙個虛擬節點,它並不會對映到乙個具體節點,另外它還包含了其他的一些屬性,這些屬性在後續的 ast 轉換的過程中會賦值,並在生成**階段用到。

那麼,為什麼要設計乙個虛擬節點呢?

因為 vue.js 3.0 和 vue.js 2.x 有乙個很大的不同——vue.js 3.0 支援了 fragment 的語法,即元件可以有多個根節點,比如:

這種寫法在 vue.js 2.x 中會報錯,提示模板只能有乙個根節點,而 vue.js 3.0 允許了這種寫法。但是對於一棵樹而言,必須有乙個根節點,所以虛擬節點在這種場景下就非常有用了,它可以作為 ast 的根節點,然後其 children 包含了 img 和 hello 的節點。

vue3 0建立乙個專案

使用vue3.0建立乙個專案 使用vue ui建立 管理專案 專案結構目錄整理 初始檔案新增 基本配置 跨域配置 環境配置 下面嘗試用test preview production分別表示測試 預覽 生產三種環境 修改package.json檔案如下 scripts 在專案根目錄下新建 env.te...

通過vue3 0建立乙個vuetify的專案

建立完成後,我建立的名稱是vuetify 通過 cd vuetify到達該級目錄 輸入vue add vuetify命令 選擇預設項即可,下圖是安裝成功的樣子 開啟的專案目錄是這樣的 使用yarn serve 執行專案 此處需要注意,專案會開啟很慢,但是沒有報錯,在network中發現 導致專案變慢...

Vue 乙個元件引用另乙個元件

有些時候需要這麼做,比如,我想在首頁載入輪播元件,但是又不想全域性註冊 因為不是每個頁面都需要輪播功能 方法1 1 template 2 div 34 testcomponent testcomponent 5div 6template 78 script 9 1.先使用import匯入你要在該元件...