vue組件的好處:1、組件是獨(dú)立和可復(fù)用的代碼組織單元,組件系統(tǒng)是vue核心特性之一,它讓開(kāi)發(fā)者使用小型、獨(dú)立和通??蓮?fù)用的組件構(gòu)建大型應(yīng)用;2、組件化開(kāi)發(fā)能大幅度提高應(yīng)用開(kāi)發(fā)效率、測(cè)試性、復(fù)用性等;3、能讓web前端代碼實(shí)現(xiàn)“高內(nèi)聚”和“低耦合”,使得前端開(kāi)發(fā)的過(guò)程變成搭積木的過(guò)程。
本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。
Vue的單頁(yè)面開(kāi)發(fā)其實(shí)很簡(jiǎn)單又很抽象,單頁(yè)面是指唯一的Vue示例,也就是main.js里的new Vue({});
那么多頁(yè)面的效果是怎么實(shí)現(xiàn)的呢?這就依賴(lài)于組件化開(kāi)發(fā),每一個(gè)子頁(yè)面都由多個(gè)組件構(gòu)成,在url改變時(shí)刷新并渲染不同的組件群,這就達(dá)到了多頁(yè)面的效果,在vue中如何實(shí)現(xiàn)url改變其實(shí)就是路由了。
Vue組件化
什么是組件化
當(dāng)我們遇到復(fù)雜問(wèn)題時(shí),很難一次性搞定所有問(wèn)題,所以這時(shí)需要把問(wèn)題拆解,把小問(wèn)題都解決后綜合起來(lái)就能得到這個(gè)問(wèn)題的解決方案,聽(tīng)起來(lái)很熟悉吧!其實(shí)在動(dòng)態(tài)規(guī)劃中就是這種思想了,只不過(guò)時(shí)最優(yōu)解和解決方案的區(qū)分。
組件化也是這種解決問(wèn)題的思路,當(dāng)一個(gè)項(xiàng)目中的功能邏輯特別復(fù)雜時(shí),我們很難一次性完成所有邏輯交互,因?yàn)槿菀装l(fā)生冗余或回調(diào)地獄,一旦某一部分出錯(cuò),很難追究到哪行代碼出現(xiàn)問(wèn)題。同時(shí)一個(gè)人的精力是有限的,為了減輕個(gè)人的壓力,將問(wèn)題分為小的功能模塊,既可以減少管理和維護(hù)該界面的成本,也可以適合團(tuán)隊(duì)合作。
但其實(shí)Vue的前端開(kāi)發(fā)不需要很多人,因?yàn)樗禽p量級(jí)的,所以實(shí)際項(xiàng)目中只需要美工人員把設(shè)計(jì)好的原型發(fā)給一兩個(gè)前端開(kāi)發(fā)人員就行了,至于為什么需要這么少的開(kāi)發(fā)人員,很大程度上因?yàn)閂ue的組件化開(kāi)發(fā)讓業(yè)務(wù)邏輯更清晰。
vue組件化思想
-
組件化的思想讓我們能夠開(kāi)發(fā)出一個(gè)個(gè)獨(dú)立且可復(fù)用的小組件來(lái)構(gòu)造我們的應(yīng)用。
-
每一個(gè)應(yīng)用(功能)都可以抽象成一個(gè)組件樹(shù)。
-
盡可能的將頁(yè)面拆分成小且可復(fù)用的組件。這樣讓我們的代碼更加方便組織和管理,并且擴(kuò)展性也更強(qiáng)。
vue組件化的好處
1、組件是獨(dú)立和可復(fù)用的代碼組織單元。組件系統(tǒng)是vue核心特性之一,它使開(kāi)發(fā)者使用小型、獨(dú)立和通??蓮?fù)用的組件構(gòu)建大型應(yīng)用;
2、組件化開(kāi)發(fā)能大幅度提高應(yīng)用開(kāi)發(fā)效率、測(cè)試性、復(fù)用性等;
3、能讓 web 前端代碼實(shí)現(xiàn)“高內(nèi)聚 低耦合”,使得前端開(kāi)發(fā)的過(guò)程變成搭積木的過(guò)程。
組件的使用
原理
- 組件的使用分三步:
- 創(chuàng)建組件構(gòu)造器
- 注冊(cè)組件
- 使用組件
- 創(chuàng)建組件構(gòu)造器:
- 調(diào)用const mycomponent = Vue.extend({template : “})創(chuàng)建構(gòu)造器。
- template后的引號(hào)里寫(xiě)相應(yīng)的html代碼,其實(shí)這個(gè)template就是.vue文件中的template(不清楚的可以去Vue文件構(gòu)成)。
- 在
:
后的單引號(hào)其實(shí)是ES6的語(yǔ)法,眾所周知雙引號(hào)內(nèi)的字符串等內(nèi)容進(jìn)行換行需要寫(xiě)特殊字符,而在單引號(hào)間的內(nèi)容,里面的代碼在使用時(shí)是不會(huì)改變代碼的格式的,例如:
- 注冊(cè)組件:
- 調(diào)用Vue.component(‘自己起的組件名’,mycomponent),第一個(gè)參數(shù)是自己起的組件名,第二個(gè)參數(shù)是你在創(chuàng)建組件構(gòu)造器的時(shí)候的const變量。
- 調(diào)用Vue.component(‘自己起的組件名’,mycomponent),第一個(gè)參數(shù)是自己起的組件名,第二個(gè)參數(shù)是你在創(chuàng)建組件構(gòu)造器的時(shí)候的const變量。
- 使用組件:
- 在上方的template里使用
- 在上方的template里使用
實(shí)際開(kāi)發(fā)中的使用-父子組件
-
實(shí)際開(kāi)發(fā)中組件的使用非常簡(jiǎn)單,每個(gè)組件都是一個(gè).vue文件,直接引入并聲明組件即可以使用。
-
第一步:創(chuàng)建一個(gè).vue文件,我這里在views文件夾下創(chuàng)建一個(gè)Home.vue文件
-
第二步:在需要用到這個(gè)組件中引入Home文件,我這個(gè)例子是在App.vue中引入了Home.vue,大家實(shí)際開(kāi)發(fā)中請(qǐng)自行引入。
-
第三步:在App.vue中注冊(cè)該組件,這個(gè)components的屬性我在前面說(shuō)過(guò),里面的組件就是該vue文件的子組件,父子關(guān)系形成,在這里一個(gè)父親可以有多個(gè)兒子噢?。。?br />
-
第四步:使用該組件,也就是將Home.vue的內(nèi)容顯示在App.vue中
父子組件傳遞數(shù)據(jù)
- 通過(guò)props向子組件傳遞數(shù)據(jù)。
- 通過(guò)事件向父組件發(fā)送發(fā)送消息。
父?jìng)髯?props用法
- 在子組件中,使用props來(lái)聲明需要從父組件接收的數(shù)據(jù)。
- props和data、methods、computed同級(jí),里面存的就是父組件傳來(lái)的數(shù)據(jù)。
- props分為兩種:
- 第一種:對(duì)象,對(duì)象可以設(shè)置傳遞時(shí)的類(lèi)型,也可以設(shè)置默認(rèn)值等。
- 第二種:字符串?dāng)?shù)組形式,數(shù)組中每個(gè)字符串就是傳遞的數(shù)據(jù)的名字。
- 第一種情況:
- 通過(guò)之前的學(xué)習(xí),大家應(yīng)該能看懂這兩張圖,第一張圖片的語(yǔ)句是寫(xiě)在.vue文件中的template中的,而這個(gè)子組件的名稱(chēng)應(yīng)該是
patientlist
,而向子組件傳遞的信息其實(shí)就是:weizhen="notfin"
,在第二張圖片中可以發(fā)現(xiàn),notfin是個(gè)數(shù)組,那么weizhen是什么??看第三張圖片,我在props里定義了一個(gè)對(duì)象!這個(gè)對(duì)象的名字就是weizhen,所以這個(gè)weizhen就是父組件把向子組件傳遞的數(shù)據(jù)封裝了一個(gè)名字! - 這樣就實(shí)現(xiàn)了父組件向子組件傳遞數(shù)據(jù)的第二種方式,怎么動(dòng)態(tài)監(jiān)控父組件傳來(lái)的數(shù)據(jù)是否有變化并進(jìn)行刷新后期會(huì)講!
- 通過(guò)之前的學(xué)習(xí),大家應(yīng)該能看懂這兩張圖,第一張圖片的語(yǔ)句是寫(xiě)在.vue文件中的template中的,而這個(gè)子組件的名稱(chēng)應(yīng)該是
- 第二種情況:
- 用上面的前兩張圖,其實(shí)變化的就是接收的方式:
- 這樣也能獲取到相應(yīng)的數(shù)據(jù),但其實(shí)我喜歡用第一種,因?yàn)橐?guī)定了類(lèi)型和默認(rèn)值后能讓代碼更容易讀懂。
- 用上面的前兩張圖,其實(shí)變化的就是接收的方式:
子傳父-this.$emit()自定義事件
- 子傳父使用this.$emit(‘自己起的名稱(chēng)’,data)
- 這個(gè)方法有兩個(gè)參數(shù),第一個(gè)是自己起的名字,例如上面的
weizhen
;第二個(gè)參數(shù)是你要傳遞的數(shù)據(jù),這個(gè)數(shù)據(jù)可以是通過(guò)子組件中的函數(shù)處理好的數(shù)據(jù),也可以是data中定義的數(shù)據(jù)。這樣父組件就可以獲取到子組件中返回的結(jié)果。
父組件直接獲取子組件的數(shù)據(jù)
this.$children
-
在父組件中的script模塊中的methods中,如果想要直接獲取子組件的數(shù)據(jù)可以使用this.$children。
-
如下圖,我們使用$children獲取子組件中的message字符串。
-
this.$children的缺點(diǎn):
- 通過(guò)$children訪問(wèn)子組件時(shí),是一個(gè)數(shù)組類(lèi)型,訪問(wèn)其中的子組件必須通過(guò)索引值。
- 當(dāng)子組件過(guò)多,我們需要拿到其中一個(gè)時(shí),往往不能確定它的索引值,甚至還可能會(huì)發(fā)生變化。
this.$ref
- ref是reference-引用的簡(jiǎn)寫(xiě)。
- $ref和ref經(jīng)常搭配使用,使用步驟:
- 通過(guò)ref給某一個(gè)子組件綁定一個(gè)特定的ID。
- 通過(guò)this.$refs.ID就可以訪問(wèn)到該組件了。
子組件直接獲取父組件的數(shù)據(jù)-this.$parent
- 雖然可以通過(guò)這種方式直接獲取父組件的值,但實(shí)際項(xiàng)目開(kāi)發(fā)中不建議使用這種方法,下面說(shuō)明一下為什么:
- 首先,子組件不需要很多的數(shù)據(jù),子組件只需要自己處理的數(shù)據(jù)即可,如果申請(qǐng)了過(guò)多的數(shù)據(jù)就提高了耦合度。
- 其次,在進(jìn)行不同項(xiàng)目的組件復(fù)用時(shí),我們根據(jù)需求只用到了這個(gè)子組件,如果使用this.$parent方式獲取數(shù)據(jù),那么父組件中如果沒(méi)有對(duì)應(yīng)字段就報(bào)錯(cuò)了呀!
- 最后,如果子組件都能隨便方位父組件中的數(shù)據(jù),那么我們維護(hù)起來(lái)會(huì)非常麻煩,如果后期不需要某個(gè)字段,子組件中也要對(duì)應(yīng)修改,會(huì)提高維護(hù)成本和任務(wù)量,同時(shí)也是浪費(fèi)時(shí)間。
- 綜上所述:真的不建議使用$parent,但是要了解。
非父子組件之間的數(shù)據(jù)傳遞
- Vue1.x:
- 使用$dispatch向上派發(fā)事件。
- 使用$broadcast向下廣播事件。
- Vue2.x:
- 首先取消了Vue1.x中的兩個(gè)方法。
- 這個(gè)版本使用了中央事件總線(xiàn),也就是通過(guò)中介完成。
- 這個(gè)中介的意思跟數(shù)據(jù)庫(kù)中一對(duì)多關(guān)系的兩個(gè)表需要一個(gè)關(guān)系表來(lái)防止結(jié)構(gòu)混亂。
- 經(jīng)過(guò)了一系列的發(fā)展和優(yōu)化,Vuex應(yīng)運(yùn)而生,Vuex管理方案是目前Vue的一大核心功能,后面的文章中會(huì)單獨(dú)講Vuex。
總結(jié)
- 組件是Vue中最為重要的功能之一,在實(shí)際開(kāi)發(fā)中要多多利用,如果有可重復(fù)使用的組件那就用,畢竟是要偷懶的,要是每次新打一遍對(duì)應(yīng)的代碼,那太沒(méi)意思了!