今天小編給大家分享一下Vue中v-model指令的原理是什么的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)專注于迎澤網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供迎澤營銷型網(wǎng)站建設(shè)，迎澤網(wǎng)站制作、迎澤網(wǎng)頁設(shè)計、迎澤網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造迎澤網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供迎澤網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

vue的v-model是一個十分強大的指令,它可以自動讓原生表單組件的值自動和你選擇的值綁定,

我們來看一下它的效果:

輸入框的值和一個數(shù)據(jù)是綁定的,輸入框的值變化,和他綁定的值也會發(fā)生變化

我們可以參照官方文檔的例子    http://cn.vuejs.org/v2/guide/forms.html#文本

我們在手動輸入 hello的過程中 下面和他綁定的p標簽的值也是實時變化的

如此神奇的效果是如何實現(xiàn)的呢? 還是參照官方文檔

http://cn.vuejs.org/v2/guide/components.html#使用自定義事件的表單輸入組件

官方也說明了,v-model只不過是一個語法糖而已,真正的實現(xiàn)靠的還是

1. ?v-bind:綁定響應式數(shù)據(jù)

2. 觸發(fā) input 事件 并傳遞數(shù)據(jù) (核心和重點)

現(xiàn)在我們也想設(shè)計自己的表單組件,也想通過 v-model暴露組件的值,怎么做呢?

例如我們要設(shè)計一個 自定義貨幣輸入的組件, 通過 v-model暴露組件的值,我們可能使用如下的組件代碼

<currency-input v-model="price"></currency-input>

然后再使用 這個我們自己定義的組件時, 組件內(nèi)部會暴露出 組件的值到 v-model所綁定的值中去;那它是如何實現(xiàn)的呢?\

要搞明白v-model的實現(xiàn),需要通過查看官方的自定義v-model組件示例的部分代碼來進行說明

我們看上圖中的代碼,有行  $emit的代碼,這行代碼實際上會觸發(fā)一個 input事件, 'input'后的參數(shù)就是傳遞給v-model綁定的屬性的值,也就是說 v-model實現(xiàn)自定義的數(shù)據(jù)綁定的原理是這樣的:

首先,大體的組件結(jié)構(gòu):

<custom-comp v-model="myattr">
  ?<input /> ??
  <select> ?? 
</custom-comp>

也就是自定義的組件內(nèi)部一般包含原生的表單組件(當然非表單的組件也可以)

然后,給原生控件綁定事件,捕捉到原生組件的值,利用 $emit方法,觸發(fā)input方法,組件監(jiān)聽到 input事件然后把值傳入到myattr中.

這里有個疑問,為什么是 'input'呢??? 三個字,看文檔!

這個就是 vue對 v-model實現(xiàn)的一個規(guī)則: 使用了v-model的組件會

自動監(jiān)聽 input 事件,并把這個input事件所攜帶的值 傳遞給v-model所綁定的屬性!這樣組件內(nèi)部的值就給到了父組件了

通過以上講解,我們總結(jié)一下如何利用v-model實現(xiàn)自定義的表單組件:

監(jiān)聽原生組件的事件,當獲取到原生組件的值后把 值通過調(diào)用 $emit('input' ,data) 方法去觸發(fā) input事件 

以上就是“Vue中v-model指令的原理是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：Vue中v-model指令的原理是什么
文章URL：http://www.chinadenli.net/article40/pesiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、域名注冊、App設(shè)計、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)