Vue組件化之父子組件傳值
一、前言
作為國內使用較多的前端框架——Vue,作為一名開發(fā)人員是必須要掌握的,小編作為一名后端人員。由于公司前端人員不足,也是學起來了Vue!
框架的精髓就在于,組件化!
一個頁面拆分幾個小組件,這就牽扯到組件之間的數(shù)據(jù)傳輸問題!
比較常用的就是:父子組件傳值,兄弟之間傳值場景小編這里還沒有遇到,所以本次就以常用的父子組件傳值來結合例子說一下!
二、組件化優(yōu)點
Vue組件化的優(yōu)點主要有以下幾個方面:
- 更好的代碼復用性
通過組件化的方式,將功能拆分為不同的模塊,每個模塊具有單一的職責,實現(xiàn)了代碼的分離和應用的解耦。這樣,一個組件可以在多個頁面中復用,減少了代碼的重復編寫,提高了開發(fā)效率。 - 更易于進行分工合作
通過組件化的方式,不同的開發(fā)者可以負責不同公共組件的開發(fā),有利于項目的分工合作。每個開發(fā)者只需要關注自己負責的組件的開發(fā)工作,不會干擾到其他組件開發(fā)者的工作,提高了項目的開發(fā)效率和質量。 - 更易于維護和升級
Vue組件化可以讓開發(fā)者更加專注于每個組件的功能,從而更方便地對代碼進行維護和升級。如果在系統(tǒng)中要更換某個功能,只需升級其中的一個組件,而不需要更改其他組件。 - 更好的靈活性和可復用性
Vue組件化能帶來更好的靈活性,通過組合不同的組件可以快速搭建出新的頁面,這樣即使項目需求變更,也能通過復用已有的組件來快速實現(xiàn)新的功能。 - 更直觀的數(shù)據(jù)流
由于Vue數(shù)據(jù)流的單向流動方式,讓我們更容易追蹤數(shù)據(jù)的變化,從而更好地管理數(shù)據(jù)狀態(tài)。通過組件的props
和$emit
交互,讓數(shù)據(jù)的傳遞具有一定的規(guī)范和限制,減少了代碼耦合度。
總之,Vue組件化能夠帶來更好的代碼復用性、易于維護和升級、靈活性、直觀的數(shù)據(jù)流和分工合作,是現(xiàn)代Web開發(fā)的必然選擇。
三、實戰(zhàn)
在Vue中,父子組件傳值的方式有很多種,本文介紹其中比較常用的兩種方式:props和?
1、App.vue
在根容器中展示我們的父組件!
2、ParentComponent.vue
這是父容器:
components: { ChildComponent }:父組件中引入并注冊子組件,這樣才能在父組件的模板中使用。
:message="message":父組件的message數(shù)據(jù)傳遞到子組件中,需要使用v-bind或者簡寫的":"來將數(shù)據(jù)綁定到子組件標簽上
@updateNum="updateNum":子組件向父組件傳遞一個自定義事件,父組件可以監(jiān)聽這個事件并接收傳遞過來的數(shù)據(jù)
3、ChildComponent.vue
這是子組件:
子組件使用:props來接收數(shù)據(jù),變量名稱直接可以使用
有一些參數(shù)可以根據(jù)自己要求添加:
this.$emit('updateNum', this.num):子組件可以通過$emit方法來發(fā)布一個自定義事件,父組件可以監(jiān)聽這個事件并接收傳遞過來的數(shù)據(jù),可以不傳值!?
關鍵字 | 值 | 解釋 |
type | String | 數(shù)據(jù)類型:String、Number、Boolean、Array、Object、Date、Function、Symbol |
default | '這是默認值' | 如果不傳值,默認值 |
required | true | 是否必填 |
子組件可以通過emit方法來發(fā)布一個自定義事件,父組件可以監(jiān)聽這個事件并接收傳遞過來的數(shù)據(jù),可以不傳值!
第一個參數(shù)一定要和父組件的事件名稱一致??!
4、效果
父組件的message的值會傳遞給子組件,并在子組件展示。
每次點擊子組件的+1就會向父組件發(fā)布事件并把num傳遞給父組件。
四、總結
從上述兩種方式可以看出,props傳值需要在子組件中預先定義需要接收的屬性,在父組件中傳遞數(shù)據(jù)時需要使用v-bind或者":"進行綁定。而$emit向父組件傳值則需要在子組件中發(fā)布自定義事件,父組件中需要監(jiān)聽這個事件并在事件處理函數(shù)中獲取傳遞過來的數(shù)據(jù)。
在實際開發(fā)中,我們需要根據(jù)具體的場景來選擇使用哪種方式進行父子組件之間的數(shù)據(jù)傳遞,以便讓我們的代碼更加簡潔、高效、穩(wěn)定。