您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue組件三大核心的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
一、屬性
1.自定義屬性props
prop 定義了這個(gè)組件有哪些可配置的屬性,組件的核心功能也都是它來(lái)確定的。寫(xiě)通用組件時(shí),props 最好用對(duì)象的寫(xiě)法,這樣可以針對(duì)每個(gè)屬性設(shè)置類型、默認(rèn)值或自定義校驗(yàn)屬性的值,這點(diǎn)在組件開(kāi)發(fā)中很重要,然而很多人卻忽視,直接使用 props 的數(shù)組用法,這樣的組件往往是不嚴(yán)謹(jǐn)?shù)摹?/p>
// 父組件 <props name='屬性' :type='type' :is-visible="false" :on-change="handlePropChange" :list=[22,33,44] title="屬性Demo" class="test1" :class="['test2']" : //注意:style 的優(yōu)先級(jí)是要高于 style > </props> // 子組件 props: { name: String, type: { //從父級(jí)傳入的 type,它的值必須是指定的 'success', 'warning', 'danger'中的一個(gè),如果傳入這三個(gè)以外的值,都會(huì)拋出一條警告 validator: (value) => { return ['success', 'warning', 'danger'].includes(value) } }, onChange: { //對(duì)于接收的數(shù)據(jù),可以是各種數(shù)據(jù)類型,同樣也可以傳遞一個(gè)函數(shù) type: Function, default: () => { } }, isVisible: { type: Boolean, default: false }, list: { type: Array, // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取 default: () => [] } }
從上面的例中,可以得出props 可以顯示定義一個(gè)或一個(gè)以上的數(shù)據(jù),對(duì)于接收的數(shù)據(jù),可以是各種數(shù)據(jù)類型, 同樣也可以傳遞一個(gè)函數(shù)。
2.inheritAttrs
這是2.4.0 新增的一個(gè)API,默認(rèn)情況下父作用域的不被認(rèn)作 props 的特性綁定將會(huì)“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上。可通過(guò)設(shè)置 inheritAttrs 為 false,這些默認(rèn)行為將會(huì)被去掉。注意: 這個(gè)選項(xiàng)不影響 class 和 style 綁定 。
上個(gè)例中,title屬性沒(méi)有在子組件中props中聲明,就會(huì)默認(rèn)掛在子組件的根元素上,如下圖所示:
3. data與props區(qū)別
相同點(diǎn)
兩者選項(xiàng)里都可以存放各種類型的數(shù)據(jù),當(dāng)行為操作改變時(shí),所有行為操作所用到和模板所渲染的數(shù)據(jù)同時(shí)都會(huì)發(fā)生同步變化。
不同點(diǎn)
data 被稱之為動(dòng)態(tài)數(shù)據(jù),在各自實(shí)例中,在任何情況下,我們都可以隨意改變它的 數(shù)據(jù)類型和數(shù)據(jù)結(jié)構(gòu) ,不會(huì)被任何環(huán)境所影響。
props 被稱之為靜態(tài)數(shù)據(jù),在各自實(shí)例中,一旦在初始化被定義好類型時(shí),基于 Vue 是單向數(shù)據(jù)流,在數(shù)據(jù)傳遞時(shí)始終不能改變它的數(shù)據(jù)類型,而且不允許在子組件中直接操作 傳遞過(guò)來(lái)的props數(shù)據(jù),而是需要通過(guò)別的手段,改變傳遞源中的數(shù)據(jù)。至于如何改變,我們接下去詳細(xì)介紹:
4.單向數(shù)據(jù)流
這個(gè)概念出現(xiàn)在組件通信。props的數(shù)據(jù)都是通過(guò)父組件或者更高層級(jí)的組件數(shù)據(jù)或者字面量的方式進(jìn)行傳遞的,不允許直接操作改變各自實(shí)例中的props數(shù)據(jù),而是需要通過(guò)別的手段,改變傳遞源中的數(shù)據(jù)。那如果有時(shí)候我們想修改傳遞過(guò)來(lái)的prop,有哪些辦法呢?
方法1:過(guò)渡到 data 選項(xiàng)中
在子組件的 data 中拷貝一份 prop,data 是可以修改的
export default { props: { type: String }, data () { return { currentType: this.type } } }
在 data 選項(xiàng)里通過(guò) currentType接收 props中type數(shù)據(jù),相當(dāng)于對(duì) currentType= type進(jìn)行一個(gè)賦值操作,不僅拿到了 currentType的數(shù)據(jù),而且也可以改變 currentType數(shù)據(jù)。
方法2:利用計(jì)算屬性
export default { props: { type: String }, computed: { normalizedType: function () { return this.type.toUpperCase(); } } }
以上兩種方法雖可以在子組件間接修改props的值,但如果子組件想修改數(shù)據(jù)并且同步更新到父組件,卻無(wú)濟(jì)于事。在一些情況下,我們可能會(huì)需要對(duì)一個(gè) prop 進(jìn)行『雙向綁定』,此時(shí)就推薦以下這兩種方法:
方法3:使用.sync
// 父組件 <template> <div class="hello"> <div> <p>父組件msg:{{ msg }}</p> <p>父組件數(shù)組:{{ arr }}</p> </div> <button @click="show = true">打開(kāi)model框</button> <br /> <demo :show.sync="show" :msg.sync="msg" :arr="arr"></demo> </div> </template> <script> import Demo from "./demo.vue"; export default { name: "Hello", components: { Demo }, data() { return { show: false, msg: "模擬一個(gè)model框", arr: [1, 2, 3] }; } }; </script> // 子組件 <template> <div v-if="show" class="border"> <div>子組件msg:{{ msg }}</div> <div>子組件數(shù)組:{{ arr }}</div> <button @click="closeModel">關(guān)閉model框</button> <button @click="$emit('update:msg', '浪里行舟')"> 改變文字 </button> <button @click="arr.push('前端工匠')">改變數(shù)組</button> </div> </template> <script> export default { props: { msg: { type: String }, show: { type: Boolean }, arr: { type: Array //在子組件中改變傳遞過(guò)來(lái)數(shù)組將會(huì)影響到父組件的狀態(tài) } }, methods: { closeModel() { this.$emit("update:show", false); } } };
父組件向子組件 props 里傳遞了 msg 和 show 兩個(gè)值,都用了.sync 修飾符,進(jìn)行雙向綁定。
不過(guò).sync 雖好,但也有限制,比如:
1) 不能和表達(dá)式一起使用 (如 v-bind:title.sync="doc.title + '!'"
是無(wú)效的);
2) 不能用在字面量對(duì)象上 (如 v-bind.sync="{ title: doc.title }"
是無(wú)法正常工作的)。
方法4:將父組件中的數(shù)據(jù)包裝成對(duì)象傳遞給子組件
這是因?yàn)樵?JavaScript 中對(duì)象和數(shù)組是通過(guò)引用傳入的,所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來(lái)說(shuō),在子組件中改變這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。比如上例中在子組件中修改父組件傳遞過(guò)來(lái)的數(shù)組arr,從而改變父組件的狀態(tài)。
5.向子組件中傳遞數(shù)據(jù)時(shí)加和不加 v-bind?
對(duì)于字面量語(yǔ)法和動(dòng)態(tài)語(yǔ)法,初學(xué)者可能在父組件模板中向子組件中傳遞數(shù)據(jù)時(shí)到底加和不加 v-bind 會(huì)感覺(jué)迷惑。
v-bind:msg = 'msg'
這是通過(guò) v-bind 進(jìn)行傳遞數(shù)據(jù)并且傳遞的數(shù)據(jù)并不是一個(gè)字面量,雙引號(hào)里的解析的是一個(gè)表達(dá)式,同樣也可以是實(shí)例上定義的數(shù)據(jù)和方法(其實(shí)就是引用一個(gè)變量)。
msg='浪里行舟'
這種在沒(méi)有 v-bind 的模式下只能傳遞一個(gè)字面量,這個(gè)字面量只限于 String 類量,字符串類型。那如果想通過(guò)字面量進(jìn)行數(shù)據(jù)傳遞時(shí), 如果想傳遞非String類型,必須props名前要加上v-bind ,內(nèi)部通過(guò)實(shí)例尋找,如果實(shí)例方?jīng)]有此屬性和方法,則默認(rèn)為對(duì)應(yīng)的數(shù)據(jù)類型。
:msg='11111' //Number :msg='true' //Bootlean :msg='()=>{console.log(1)}' //Function :msg='{a:1}' //Object
二、事件
1.事件驅(qū)動(dòng)與數(shù)據(jù)驅(qū)動(dòng)
用原生JavaScript事件驅(qū)動(dòng)通常是這樣的流程:
先通過(guò)特定的選擇器查找到需要操作的節(jié)點(diǎn) -> 給節(jié)點(diǎn)添加相應(yīng)的事件監(jiān)聽(tīng) 然后用戶執(zhí)行某事件(點(diǎn)擊,輸入,后退等等) -> 調(diào)用 JavaScript 來(lái)修改節(jié)點(diǎn)
這種模式對(duì)業(yè)務(wù)來(lái)說(shuō)是沒(méi)有什么問(wèn)題,但是從開(kāi)發(fā)成本和效率來(lái)說(shuō)會(huì)比較不理想,特別是在業(yè)務(wù)系統(tǒng)越來(lái)越龐大的時(shí)候。另一方面,找節(jié)點(diǎn)和修改節(jié)點(diǎn)這件事,效率本身就很低,因此出現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)模式。
Vue的一個(gè)核心思想是數(shù)據(jù)驅(qū)動(dòng)。所謂數(shù)據(jù)驅(qū)動(dòng),是指視圖是由數(shù)據(jù)驅(qū)動(dòng)生成的,我們對(duì)視圖的修改,不會(huì)直接操作 DOM,而是通過(guò)修改數(shù)據(jù),其流程如下:
用戶執(zhí)行某個(gè)操作 -> 反饋到 VM 處理(可以導(dǎo)致 Model 變動(dòng)) -> VM 層改變,通過(guò)綁定關(guān)系直接更新頁(yè)面對(duì)應(yīng)位置的數(shù)據(jù)
可以簡(jiǎn)單地理解:數(shù)據(jù)驅(qū)動(dòng)不是操作節(jié)點(diǎn)的,而是通過(guò)虛擬的抽象數(shù)據(jù)層來(lái)直接更新頁(yè)面。主要就是因?yàn)檫@一點(diǎn),數(shù)據(jù)驅(qū)動(dòng)框架才得以有較快的運(yùn)行速度(因?yàn)椴恍枰フ垓v節(jié)點(diǎn)),并且可以應(yīng)用到大型項(xiàng)目。
2.修飾符事件
Vue事件分為普通事件和修飾符事件,這里我們主要介紹修飾符事件。
Vue 提供了大量的修飾符封裝了這些過(guò)濾和判斷,讓開(kāi)發(fā)者少寫(xiě)代碼,把時(shí)間都投入的業(yè)務(wù)、邏輯上,只需要通過(guò)一個(gè)修飾符去調(diào)用。我們先來(lái)思考這樣問(wèn)題:怎樣給這個(gè)自定義組件 custom-component 綁定一個(gè)原生的 click 事件?
<custom-component>組件內(nèi)容</custom-component>
如果你的回答是 <custom-component @click="xxx">
,那就錯(cuò)了。這里的 @click 是自定義事件 click,并不是原生事件 click。綁定原生的 click 是這樣的:
<custom-component @click.native="xxx">組件內(nèi)容</custom-component>
實(shí)際開(kāi)發(fā)過(guò)程中離不開(kāi)事件修飾符,常見(jiàn)事件修飾符有以下這些:
表單修飾符
1).lazy
在默認(rèn)情況下, v-model
在每次 input
事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。你可以添加 lazy
修飾符,從而轉(zhuǎn)變?yōu)槭褂?nbsp; change
事件進(jìn)行同步。適用于輸入完所有內(nèi)容后,光標(biāo)離開(kāi)才更新視圖的場(chǎng)景。
2).trim
如果要自動(dòng)過(guò)濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符:
<input v-model.trim="msg">
這個(gè)修飾符可以過(guò)濾掉輸入完密碼不小心多敲了一下空格的場(chǎng)景。需要注意的是, 它只能過(guò)濾首尾的空格 !首尾,中間的是不會(huì)過(guò)濾的。
3).number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型,可以給 v-model 添加 number 修飾符:
<input v-model.number="value" type="text" />
從上面例子,可以得到如果你先輸入數(shù)字,那它就會(huì)限制你輸入的只能是數(shù)字。如果你先輸入字符串,那它就相當(dāng)于沒(méi)有加.number
事件修飾符
<!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁(yè)面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a>
三、插槽
插槽分為普通插槽和作用域插槽,其實(shí)兩者很類似,只不過(guò)作用域插槽可以接受子組件傳遞過(guò)來(lái)的參數(shù)。
1.作用域插槽
我們不妨通過(guò)一個(gè)todolist的例子來(lái)了解作用域插槽。如果當(dāng)item選中后,文字變?yōu)辄S色(如下圖所示),該如何實(shí)現(xiàn)呢?
// 父組件 <template> <div class="toList"> <input v-model="info" type="text" /> <button @click="addItem">添加</button> <ul> <TodoItem v-for="(item, index) in listData" :key="index"> <template v-slot:item="itemProps"> // 這是個(gè)具名插槽 // 其中itemProps的值就是子組件傳遞過(guò)來(lái)的對(duì)象 <span :style="{ fontSize: '20px', color: itemProps.checked ? 'yellow' : 'blue' }" >{{ item }}</span > </template> </TodoItem> </ul> </div> </template> <script> import TodoItem from "./TodoItem"; export default { components: { TodoItem }, data() { return { info: "", listData: [] }; }, methods: { addItem() { this.listData.push(this.info); this.info = ""; } } }; </script> // 子組件 <template> <div> <li class="item"> <input v-model="checked" type="checkbox" /> <slot name="item" :checked="checked"></slot> // 將checked的值傳遞給父組件 </li> </div> </template> <script> export default { data() { return { checked: false }; } }; </script>
值得注意:v-bind:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS,但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用引號(hào)括起來(lái)) 來(lái)命名。
2.v-slot新語(yǔ)法
在 2.6.0 中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot
指令)。它取代了 slot
和 slot-scope
。
我們通過(guò)一個(gè)例子介紹下默認(rèn)插槽、具名插槽和作用域插槽的新語(yǔ)法:
// 父組件 <template> <div class="helloSlot"> <h3>2.6 新語(yǔ)法</h3> <SlotDemo> <p>默認(rèn)插槽:default slot</p> <template v-slot:title> <p>具名插槽:title slot1</p> <p>具名插槽:title slot2</p> </template> <template v-slot:item="props"> <p>作用域插槽:item slot-scope {{ props }}</p> </template> </SlotDemo> </div> </template> <script> import Slot from "./slot"; export default { components: { SlotDemo: Slot } }; </script> // 子組件 <template> <div> <slot /> <slot name="title" /> <slot name="item" :propData="propData" /> </div> </template> <script> export default { data() { return { propData: { value: "浪里行舟" } }; } }; </script>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue組件三大核心的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。