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