本篇文章給大家分享的是有關(guān)如何自定義一個(gè)Vue組件,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)梅縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
父組件 —> 子組件傳值(props)
子組件 —> 父組件傳值($emit)
以及插槽(slot)
對(duì)于一個(gè)獨(dú)立的組件來(lái)說(shuō)
props是用來(lái)為組件內(nèi)部注入核心的內(nèi)容;
$emit用來(lái)使這個(gè)獨(dú)立的組件通過(guò)一些邏輯來(lái)融入其他組件中。
舉個(gè)具體點(diǎn)的例子,假如你要做一輛車,車輪是要封裝的一個(gè)獨(dú)立組件,props指的就是根據(jù)整個(gè)車的外形你可以給輪子設(shè)置一些你想要的且符合車風(fēng)格的花紋,圖案等;
而$emit的作用則是讓這些輪子能夠和整輛車完美契合的運(yùn)作起來(lái)。差不多就是這個(gè)意思
下面來(lái)看代碼。
首先,我們先完成div的模擬代碼
{{selectContent.text}}{{item.text}}
事實(shí)上,當(dāng)你完成這段代碼時(shí),就已經(jīng)完成了這一個(gè)組件。放到平時(shí),我可能就直接把這段代碼放到業(yè)務(wù)代碼里直接用了。但既然是封裝組件,我們肯定要把它抽出來(lái)了。首先我們先要思考一下,如果我們需要把這個(gè)組件抽出來(lái),有哪些值需要父組件提供給我們呢?
相信大家一眼就能看出來(lái),subject和selectContent這兩個(gè)data是需要父組件通過(guò)props傳進(jìn)來(lái)的。但還有別的嗎?作為一個(gè)select,父組件如果只能控制內(nèi)容是不是管的有點(diǎn)太少了?可不可以讓父組件來(lái)管理select的寬度?高度?字體大小樣式等等?答案是肯定的。父組件傳的值越多,子組件的耦合就越低。下面,我們對(duì)代碼進(jìn)行微調(diào)
......
我們通過(guò)props將之前的subject和selectContent從父組件傳了進(jìn)來(lái)。同時(shí),我們還將select的寬度傳了進(jìn)來(lái),并通過(guò)mounted來(lái)設(shè)置寬度。這樣,父組件就能控制子組件的內(nèi)容和一些簡(jiǎn)單的樣式了。
當(dāng)然,作為一個(gè)完善的組件,我們還需要為組件設(shè)置默認(rèn)值,這樣就算父組件不傳值,我們的這個(gè)組件一樣可以使用
......
這回我們將props用對(duì)象的方式聲明,并設(shè)置了默認(rèn)值(default),假如父組件沒(méi)有設(shè)置子組件的寬度,那么我們可以使用默認(rèn)的100px。這樣,我們的組件更加的完善!當(dāng)然,我們的組件還有一個(gè)關(guān)鍵的功能沒(méi)有實(shí)現(xiàn),就是把選中的值傳回給父組件,不然的話這個(gè)組件就沒(méi)有意義了,我們來(lái)看choose這個(gè)函數(shù)
choose(item,value){ this.selectContent.text = item.text; this.optionWrapper.style.display = "none"; this.$emit("changeSelect",this.selectContent.text,this.selectContent.value); }
以上就是如何自定義一個(gè)Vue組件,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。