Vue.js劃分組件的方法
常見的一些頁面，大家坐在一起敲代碼就可以了，做完這個(gè)頁面再做別的頁面，但是作為一個(gè)功能復(fù)雜的系統(tǒng)，尤其是使用一些適合模塊化開發(fā)的框架，這樣會(huì)顯得效率很低，那么我們就單純的看在Vue里面如何劃分組件的。
總結(jié)下來有兩種可以劃分，兩種劃分的方法一種是頁面上的功能塊，select，pagenation,和一些需要大量代碼去實(shí)現(xiàn)的一些部分，我們可以把它提取出來放到一起或者分類。還有一種根據(jù)頁面區(qū)域來劃分,header,footer,sidebar，有了組件之后Vue的組件是怎么實(shí)現(xiàn)的？
Vue的組件是怎么實(shí)現(xiàn)的？先來看一下在文件系統(tǒng)里面是什么樣的
APP.vue是項(xiàng)目的一個(gè)入口，而我們分好的組件也是一個(gè)對象，在APP.vue里面，我們把各個(gè)組件用import 導(dǎo)入，header指的是右邊的header.vue文件，這個(gè)寫法是es6的一個(gè)寫法，當(dāng)然如果不用不用es6組件化，也得用其他的一些requires來寫，進(jìn)行一個(gè)打包處理，如果只是把這兩個(gè)組件引入到app.vue 里面，在頁面中還是現(xiàn)實(shí) 不了這兩個(gè)組件的。
在Vue里面 必須通過components來注冊這個(gè)組件，把引入進(jìn)來的 放入，然后在模板層面上再來寫<header></header>和<footer></footer>，在渲染之后，模板層面會(huì)變成header.vue和footer.vue里面的內(nèi)容，有一點(diǎn)需要注意，Vue必須要去注冊才可以使用
介紹一下Vue組件之間的通信，秉承了一個(gè)概念，必須先要注冊，header.vue文件里面的代碼，假設(shè)我們里面有個(gè)data是username，然后方法是dothis，我們看到有一個(gè)屬性props,注冊了一個(gè)msg,當(dāng)我們的app.vue調(diào)用了header這個(gè)組件的時(shí)候，我們可以直接在header屬性里面寫msg，并且把a(bǔ)pp.vue里面任何的數(shù)據(jù)東西傳到header.vue里面，所有的都由Vue的機(jī)制去實(shí)現(xiàn)，如果header.vue這里沒有寫msg的話，是獲取不到屬性的。
總結(jié)
以上所述是小編給大家介紹的Vue.js劃分組件的方法，希望對大家有所幫助！
相關(guān)文章
利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的全過程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue-cli設(shè)置publicPath小記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下2024-07-07
Vue注冊組件有這幾種，分別是全局注冊、局部注冊、在模塊系統(tǒng)中注冊，這篇文章主要介紹了Vue注冊組件的方法,需要的朋友可以參考下2022-08-08
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3 座位選座矩陣布局的實(shí)現(xiàn)方法(可點(diǎn)擊選中拖拽調(diào)換位置)
由于公司項(xiàng)目需求需要做一個(gè)線上設(shè)置考場相關(guān)的座位布局用于給學(xué)生考機(jī)排號考試,實(shí)現(xiàn)教室考場座位布局的矩陣布局,可點(diǎn)擊選中標(biāo)記是否有座無座拖拽調(diào)換位置橫向縱向排列,本文給大家分享實(shí)現(xiàn)代碼,一起看看吧2023-11-11
Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
可控制緩存銷毀的?keepAlive?組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了可控制緩存銷毀的?keepAlive?組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實(shí)現(xiàn)異步方法同步執(zhí)行問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02