資訊專欄INFORMATION COLUMN
摘要：如何巧妙利用實(shí)現(xiàn)父子組件傳值通常子組件某個(gè)變量更新，并需要告知父組件時(shí)，需要子組件觸發(fā)事件并父組件監(jiān)聽該事件。但是熟悉上面的實(shí)現(xiàn)原理后，我們可以巧妙地運(yùn)用這一原理在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件。
v-model介紹
熟悉Vue的小伙伴們都知道 v-model 是Vue的一個(gè)很大的特色，可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定。但本質(zhì)上呢，它不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)。
以下摘取自Vue官方文檔
如何巧妙利用 v-model實(shí)現(xiàn)父子組件傳值v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件：
text 和 textarea 使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 并將 change 作為事件。
通常子組件某個(gè)變量更新，并需要告知父組件時(shí)，需要子組件觸發(fā)事件并父組件監(jiān)聽該事件。
但是熟悉上面 v-model 的實(shí)現(xiàn)原理后，我們可以巧妙地運(yùn)用這一原理（v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件）。
方法總結(jié)：1.子組件設(shè) value 為props屬性，并且不主動(dòng)改變 value 值
2.子組件通過 this.$emit("input", "updateValue") 將 updateValue 值傳給父組件
3.父組件通過 v-model="localValue" 綁定一個(gè)本地變量，即可實(shí)現(xiàn)子組件value值與父組件updateValue 值同步更新
舉例子組件，包含一個(gè)button，并且將 value 屬性設(shè)為props（ 因?yàn)?b>v-model使用的是 value屬性 ）。
點(diǎn)擊button時(shí)，sum值加1，同時(shí)通過 this.$emit("input", ++sum) 將更新后的值傳給父組件（前提：傳給父組件的值一定是你想賦給 value 的）
父組件中，通過 v-model 綁定一個(gè)本地變量，即可實(shí)現(xiàn)子父組件同步更新
value:{{rangeValue}}
實(shí)際上，這個(gè)過程是首先子組件通過 $emit("input") 更新父組件的本地變量，然后子組件中的 value 屬性通過 props 得以更新
總結(jié)這種方式尤其適合子父組件傳參的情況（子父組件同步更新）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103215.html
摘要：子組件也屬于當(dāng)前實(shí)例。監(jiān)聽鉤子函數(shù)的場(chǎng)景使用的不多，但是還是要知道的。可以獲取到父組件傳遞的除和外的所有自定義屬性。 一. 父組件向子組件傳值 創(chuàng)建parent和child組件，并在parent中注冊(cè)child組件 在父組件調(diào)用子組件標(biāo)簽中添加一個(gè)自定義屬性(msg)， im...
摘要：的單向數(shù)據(jù)傳遞直接作為一個(gè)本地變量下面是我的子組件這是父組件給我傳的數(shù)據(jù)運(yùn)行結(jié)果如下圖子組件向父組件傳遞數(shù)據(jù)基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實(shí)時(shí)的傳遞數(shù)據(jù)，必須通過事件觸發(fā)。 組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項(xiàng)目的可維護(hù)性。下面，我將由淺入深的講Vue的組件在講之前，首先我們先了解一下組件的命名。 HTML是對(duì)特征名不敏感的語言，他...
摘要：初始化項(xiàng)目安裝腳手架切換至項(xiàng)目目錄初始化項(xiàng)目開啟實(shí)時(shí)編譯小程序生命周期頁面加載一個(gè)頁面只會(huì)調(diào)用一次。頁面初次渲染完成一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。組件路徑，組件對(duì)應(yīng)的方法路由的應(yīng)用調(diào)起提示框 1.初始化wepy項(xiàng)目 安裝腳手架 npm install -g wepy-cli wepy init standard my-project 切換至項(xiàng)目...
閱讀 2048·2019-08-30 15:52
閱讀 2440·2019-08-29 18:37
閱讀 790·2019-08-29 12:33
閱讀 2839·2019-08-29 11:04
閱讀 1523·2019-08-27 10:57
閱讀 2092·2019-08-26 13:38
閱讀 2759·2019-08-26 12:25
閱讀 2445·2019-08-26 12:23
