資訊專欄INFORMATION COLUMN
摘要：的單向數(shù)據(jù)傳遞直接作為一個(gè)本地變量下面是我的子組件這是父組件給我傳的數(shù)據(jù)運(yùn)行結(jié)果如下圖子組件向父組件傳遞數(shù)據(jù)基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實(shí)時(shí)的傳遞數(shù)據(jù)，必須通過事件觸發(fā)。
組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項(xiàng)目的可維護(hù)性。下面，我將由淺入深的講Vue的組件
在講之前，首先我們先了解一下組件的命名。
HTML是對(duì)特征名不敏感的語(yǔ)言，他會(huì)將所有的字符全部轉(zhuǎn)換成小寫。我們命名了一個(gè)組件的名稱為 nameTest ,然后再其他組件里面引用
Parent.vue
parent：下面是我的子組件
Childs.vue
child:這是父組件給我傳的數(shù)據(jù)——{{userName}}
我們?cè)?Parent.vue 組件里面引用子組件 Childs.vue 然后傳入 userName 參數(shù)給子組件,Childs 在props里面接收父組件傳傳來的數(shù)據(jù)。
上面的例子我們傳入的是一個(gè)字符串，其實(shí)，props可以傳入String、Number、Object、Boolen、Array等數(shù)據(jù)類型。那么我們?cè)诮邮軈?shù)的時(shí)候就會(huì)有一個(gè)問題，我們?cè)趺粗澜邮盏膽?yīng)該是字符串"12"還是數(shù)字12呢？
所以 Vue有一個(gè) Prop驗(yàn)證 的功能。
子組件在接受數(shù)據(jù)的時(shí)候，可以指定接收具體類型的數(shù)據(jù)、是否不能為空，是否有默認(rèn)值等。
Parent.vue
parent：下面是我的子組件
Child.vue
child:這是父組件給我傳的數(shù)據(jù)——name:{{name}}——firstName:{{firstName}}——lastName:{{lastName}}——age:{{age}}運(yùn)行結(jié)果如下圖：
如果我們將條件改變的時(shí)候，name 傳入一個(gè)數(shù)組，firstName 不傳值，age 傳入一個(gè)不能轉(zhuǎn)換為數(shù)字的值。
運(yùn)行結(jié)果如下圖：
Prop傳入對(duì)象
根據(jù)我們的驗(yàn)證規(guī)則，name 必須為一個(gè)String 類型，所以控制臺(tái)報(bào)錯(cuò)：希望得到一個(gè)String,得到了一個(gè)數(shù)組；firstName 為一個(gè)必填的值，但是我們沒有傳值，所以報(bào)錯(cuò)；age要為一個(gè)可以轉(zhuǎn)換成數(shù)字的值，但是我們穿了"ss"，會(huì)經(jīng)過我們自定義的驗(yàn)證，然后拋錯(cuò)。如果我們要將一個(gè) 對(duì)象 的所有屬性全部傳給子組件，我們不需要將屬性一個(gè)個(gè)的作為Prop傳遞，只需要將整個(gè)對(duì)象傳遞過去就可以。
Parent.vue
template>parent：下面是我的子組件Childs.vue
child:這是父組件給我傳的數(shù)據(jù)——name:{{name}}——age:{{age}}運(yùn)行結(jié)果如下圖：
Prop的單向數(shù)據(jù)傳遞 直接作為一個(gè)本地變量
我們傳入一個(gè) obj 對(duì)象，然后在子組件里面可以拿到對(duì)象的所有屬性。Parent.vue
parent：下面是我的子組件Childs.vue
child:這是父組件給我傳的數(shù)據(jù)——{{con}}運(yùn)行結(jié)果如下圖：
emit :子組件 向 父組件 傳遞數(shù)據(jù) 基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實(shí)時(shí)的傳遞數(shù)據(jù)，必須通過 事件 觸發(fā)。我們通過 $emit 方法來向父子間傳遞數(shù)據(jù)，第一個(gè)參數(shù)為事件的 名稱 ，第二個(gè)為傳遞的 數(shù)據(jù) ，是一個(gè)可選的參數(shù)。父組件必須監(jiān)聽同樣的事件名稱才能監(jiān)聽到我們的這個(gè)事件，事件拋出的值必須通過 $event或者通過一個(gè)方法來訪問。
**Parent.vue
parent：這是我的子組件傳給我的值：{{num}}運(yùn)行結(jié)果如下圖：
組件間的數(shù)據(jù)雙向綁定
子組件定義了一個(gè)num變量，然后點(diǎn)擊按鈕觸發(fā)method,通過 $emit向父組件發(fā)送事件的名稱(getNum)和一個(gè)參數(shù)(this.num)，然后 父組件 監(jiān)聽事件getNum，然后將傳遞值賦值給父組件的一個(gè)屬性上，這樣就可以是實(shí)現(xiàn)子組件點(diǎn)擊一次按鈕，就向父組件發(fā)送一次數(shù)據(jù)。更多實(shí)例可以參考官網(wǎng)。我們知道我們可以使用v-model來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。但是如果這個(gè)數(shù)據(jù)是跨組件的話，我們要怎樣實(shí)現(xiàn)綁定嗎？
首先我們先要明白v-model的原理。v-model其實(shí)是分為兩個(gè)方面，一方面數(shù)據(jù)層的改變引起視圖層的變化，我們可以使用v-bind來實(shí)現(xiàn)，另一方面視圖層的變化引起數(shù)據(jù)層的變化我們可以監(jiān)聽事件來實(shí)現(xiàn)。所以我們想要雙向綁定一個(gè)數(shù)據(jù)，只需要這兩步操作。具體實(shí)現(xiàn)參考官網(wǎng)。
彈框嵌套表格組件化使用(待續(xù)...)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/101382.html
摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...
摘要：整理種組件通信方式重點(diǎn)是梳理了前兩個(gè)父子組件通信和通信我覺得文檔里的說明還是有一些簡(jiǎn)易我自己第一遍是沒看明白。第四種通信方式利用比較復(fù)雜可以單獨(dú)寫一篇 整理4種Vue組件通信方式 重點(diǎn)是梳理了前兩個(gè),父子組件通信和eventBus通信,我覺得Vue文檔里的說明還是有一些簡(jiǎn)易,我自己第一遍是沒看明白。 父子組件的通信 非父子組件的eventBus通信 利用本地緩存實(shí)現(xiàn)組件通信 Vuex...
摘要：首先是父組件里面的數(shù)據(jù)傳遞到子組件這里用，有支撐物的意思，可以理解為橋梁。 首先是父組件里面的數(shù)據(jù)傳遞到子組件這里用props，props有支撐物的意思，可以理解為橋梁。props要寫在自組件里面。 先定義一個(gè)子組件，在組件中注冊(cè)props {{message}}(子組件) export default { props: { ...
閱讀 1335·2021-09-04 16:40
閱讀 3463·2021-07-28 00:13
閱讀 2887·2019-08-30 11:19
閱讀 2621·2019-08-29 12:29
閱讀 3174·2019-08-29 12:24
閱讀 1129·2019-08-26 13:28
閱讀 2403·2019-08-26 12:01
閱讀 3454·2019-08-26 11:35
