頁面拆分公共模板與元件化

2021-09-28 20:45:29 字數 411 閱讀 7423

如果專案中存在相似的地方,例如頁面的 header,不只在單個頁面存在,而且大致相同,我們可以將其封裝成元件。

那麼該如何封裝元件呢?我們可以在 components 資料夾裡新建檔案元件.vue並寫好想要的結構樣式等;

接下來就是如何去使用封裝好的元件呢?我們只需要在使用的地方將其引入並加入 component 屬性即可:

這裡需要注意的是:vue 本身存在標籤,所以如果是將元件直接命名為header應該會出錯,所以這裡使用了大寫來區分。

專案中公用的樣式和基礎樣式可以提取出來放到 assets 資料夾中,然後再在頁面中引入:

thymeleaf引擎模板公共頁面抽取

1 抽取公共片段 2 引入公共片段 模板名 選擇器 模板名 片段名3 預設效果 insert的公共片段在div標籤中 如果使用th insert等屬性進行引入,可以不用寫 行內寫法可以加上 三種引入公共片段的th屬性 th insert 將公共片段整個插入到宣告引入的元素中 th replace 將...

vue元件與元件化

元件化是當今最為流行的一種可復用性增加的方法,隨著當今前端開發的複雜度更加,這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...

react元件的拆分與傳值

父元件通過屬性的形式向子元件傳值 子元件想要和父元件通訊,呼叫父元件傳遞過來的方法 單項資料流 父元件可以向子元件傳值,但是子元件一定不能直接的去改變這個值。父元件 import react from react import todoitem from todoitem import style....