v-model介紹

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比靜安網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式靜安網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋靜安地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

熟悉Vue的小伙伴們都知道 v-model 是Vue的一個很大的特色，可以實現(xiàn)雙向數(shù)據(jù)綁定。但本質(zhì)上呢，它不過是語法糖，它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)。
以下摘取自Vue官方文檔

v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件：

• text 和 textarea 使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 作為 prop 并將 change 作為事件。

如何巧妙利用 v-model實現(xiàn)父子組件傳值

通常子組件某個變量更新，并需要告知父組件時，需要子組件觸發(fā)事件并父組件監(jiān)聽該事件。

但是熟悉上面 v-model 的實現(xiàn)原理后，我們可以巧妙地運用這一原理（v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件）。

方法總結：

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 的）

網(wǎng)頁標題：巧妙運用v-model實現(xiàn)父子組件傳值的方法示例-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/coicip.html