Vue中的組件化編程怎么應(yīng)用

這篇文章主要介紹“Vue中的組件化編程怎么應(yīng)用”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“Vue中的組件化編程怎么應(yīng)用”文章能幫助大家解決問題。

一.模塊與組件，模塊化與組件化

對組件的理解

如果以我們原來編寫一個網(wǎng)頁的方式

依賴關(guān)系混亂我就不說了，那為什么還要說代碼復(fù)用率不高呢？能復(fù)用的css、js我不都引入了嗎？那是因?yàn)槲覀僪tml沒有復(fù)用，上面和下面兩個頁面頂部和底部相同，我能做的是直接 復(fù)制 注意這里是復(fù)制不是復(fù)用。

組件能做的事情，就是把每個功能進(jìn)行了一個組合，里面包含這個功能所需要的所有文件，其他地方如果要復(fù)用，直接進(jìn)入即可，注意我們html只是單獨(dú)這一部分的html部分。

• 組件是可以嵌套的，就如同我們的一個版塊還可以細(xì)分其他的版塊

  

• 定義：實(shí)現(xiàn)局部功能代碼（css、html、js）和資源（mp3、MP4、ttf等）的集合

• 模塊：一個js文件就是一個模塊

• 組件：集合

• 模塊化：就是將一個龐大的js文件拆分成多個分支的模塊 去共同完成一個功能（跟前面es6模塊化編程一樣）

• 組件化：將一個網(wǎng)頁按照不同的功能拆分不同的組件

二.非單文件組件

即一個文件（a.html）中包含n個組件

單文件組件：一個文件（a.vue）只包含一個組件

1.基本使用

完成這樣一個小功能以前的做法

1.1創(chuàng)建組件

很明顯我們上面的案例可以分為學(xué)生和學(xué)校兩個組件，完成不同的兩個功能。

創(chuàng)建我們的組件有幾個注意點(diǎn)：

• 首先要記住固定寫法怎么來創(chuàng)建，在vm實(shí)例外面寫Vue.extend然后里面是一個配置對象，我們以前說過一個組件其實(shí)跟vm實(shí)例是很像的，確實(shí)很像，我們以前說的watch方法、計算屬性、自定義指令、過濾器等等這里面都可以用，大多數(shù)一樣，但還是有點(diǎn)不一樣

• 第一個不一樣：我們的組件創(chuàng)建不用寫 el這個配置項(xiàng)，我們的組件創(chuàng)建過來并不是單獨(dú)給誰用的，組件就是一塊磚，哪里需要哪里搬，組件再多，最終都要?dú)wvm老大哥管理，所以由vm來配置el，來指定給誰服務(wù)

• 然后就是data這個配置項(xiàng)不一樣，以前說過el、data的兩種形式，el是$mount，data就是可以簡寫為函數(shù)形式，但是返回值必須是一個對象，而創(chuàng)建組件的時候，data必須寫為函數(shù)式，為什么，因?yàn)槿绻疫@個實(shí)例要用你這個組件，又來一個網(wǎng)頁也需要用到這個組件，如果是對象形式，在內(nèi)存中占用的是同一塊空間，你改他改都會影響到對方，但是函數(shù)就不一樣了，我用一個變量來接受你的返回值，那這個數(shù)據(jù)只屬于我了，他用一個變量來接受返回值，他又有一份屬于自己的數(shù)據(jù)了，各管各的，各改各的，誰也不影響誰

• 之前分析過我們一個組件是包含js，css以及html部分片段代碼的，但是這里只有js邏輯，我們還需要定義一個模板

1.2注冊組件

一個全新的配置項(xiàng)components注意里面寫鍵值對的方式，里面的屬性名才是我們真正的組件名，后面的值只是我們剛才取的變量名，但是一般推薦都寫一樣，因?yàn)榭梢灾苯訉懸粋€簡寫方式

而且這是局部注冊方式

1.3編寫組件化標(biāo)簽

將命名好的組件名字以html標(biāo)簽形式寫上，名為：組件標(biāo)簽

每個組件化標(biāo)簽數(shù)據(jù)是分開的，互不干擾

1.4注冊全局組件

1.5注意點(diǎn)

• 組件名：單個單詞（全小寫或者首字母大寫都可以）、多個單詞（全小寫或者同之前自定義指令用-連接并且回歸原始屬性名用‘’包起來，還有一種方法所有單詞首字母都要大寫包括第一個首字母（但是只適用于腳手架環(huán)境））

• 全新配置項(xiàng)name，可以指定該組件在開發(fā)者工具中使用的名字

• 組件標(biāo)簽可以簡寫為自閉合形式.但是必須在腳手架環(huán)境下

• 定義組件簡寫直接簡寫為一個對象，不寫Vue.extend

2.組件的嵌套

首先我們一般正規(guī)開發(fā)在vm下只有一個組件app這個組件會代理我們vm會管理所有組件，我們app管理的子組件有兩個hello和school，所以要把他們注冊在app里面，并把組件標(biāo)簽寫在app的template里面，school下面有一個子組件student，同樣的他要注冊在student下面，他的組件標(biāo)簽寫在school的template里面，最終vm實(shí)例只有一個注冊組件，app，我們的html結(jié)構(gòu)也只有一個組件標(biāo)簽，app

總之嵌套要注意的一點(diǎn)就是：子組件一定要把自己的組件標(biāo)簽寫在父組件里面，把自己注冊在父組件里面，一直寫到app結(jié)束，最后把a(bǔ)pp寫在vm里面去

3.VueComponent構(gòu)造函數(shù)

• 我們的組件本質(zhì)上是一個VueComponent的構(gòu)造函數(shù)，是我們一Vue.extend，就會幫我們創(chuàng)建一個構(gòu)造函數(shù)并賦值給這個變量

• 我們只需要寫上組件標(biāo)簽或者閉合標(biāo)簽，vue解析時就會生成這個構(gòu)造函數(shù)的實(shí)例，幫我們new出來

• 每次調(diào)用Vue.extend創(chuàng)造出來的構(gòu)造函數(shù)都是全新的，分析源碼可以發(fā)現(xiàn)，每次Vue.extend都會創(chuàng)造一個新的Component構(gòu)造函數(shù)

• 我們在new Vue中methods、computed、watch等里面的函數(shù)this指向都是vm實(shí)例對象，我們在組件中的methods、computed、watch等里面的函數(shù)this指向都是VueComponent的實(shí)例對象，簡稱vc（只出現(xiàn)在課堂上，在外要說組件實(shí)例對象），而且他跟vm基本一致，也有數(shù)據(jù)代理，數(shù)據(jù)劫持等等

4.一個重要的內(nèi)置關(guān)系

VueComponent.prototype.proto == Vue.prototype心里那根線要搭建起來

目的：讓組件vc也可以用到vue原型上的屬性和方法

三.單文件組件

我們說過一個組件.vue的文件是包含html、js、css在內(nèi)的，所以一個標(biāo)準(zhǔn)的單文件組件，需要html（template標(biāo)簽）、js（script標(biāo)簽）、css（style標(biāo)簽）

插件：vetur（pine wu）安裝了后可使用快捷鍵<v直接回車,快速生成一個一個單文件組件模板

• 先創(chuàng)建一個功能組件school

需要注意的是

一。因?yàn)槲覀兘M件需要給人引用，所以我們在寫組件的時候需要暴露出去，一般暴露的就是script，而且這是簡寫形式，真正的原版本如下，

二。還有就是我們的name配置項(xiàng)一般來說根文件名保持一致，我們的文件名一般也是采取的首字母大寫的形式，跟vue管理工具能夠保持一致

三。我們的template標(biāo)簽里面應(yīng)該由一個div包裹

• 再定義一個student組件

沒樣式可以不寫樣式

• 接下來這一個組件必須的有，之前就說過，由一個代替vm管理下面所有組件的組件，處于一人之下，萬人之上的位置，那就是app組件

  這個組件一般是用來引入我們的子組件，并注冊，注意引入是寫在export之外，然后還需要在template調(diào)用

• 然后我們就需要一個vm老大哥來指揮組件搭建服務(wù)于誰，一般是定義一個main.js的js文件

  導(dǎo)入并注冊我們的App組件，如果要保持下一個頁面干凈就可以在這里寫一個template模板把a(bǔ)pp組件標(biāo)簽寫進(jìn)去，也可以下一個頁面見

• 最后我們需要一個容易，vue模板html文件來導(dǎo)入我們的main.js

  注意：要先引入我們的vue，才能使main.js里面的new Vue生效

自此我們一個單文件組件環(huán)境全部搭建完畢，但是要運(yùn)行的話必須配合腳手架環(huán)境。

關(guān)于“Vue中的組件化編程怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。