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