Vue.js組件中v-model的使用

calx 發(fā)布于2019-08-21 15:49 / 373人閱讀

摘要：在中，經(jīng)常會(huì)使用實(shí)現(xiàn)表單的雙向數(shù)據(jù)綁定功能。使用組件時(shí)，組件庫(kù)中的含有輸出類型的自定義組件，都會(huì)使用指令，該指令綁定的元素就是組件的輸出結(jié)果。

在 Vue.js 中，經(jīng)常會(huì)使用 v-model 實(shí)現(xiàn)表單的雙向數(shù)據(jù)綁定功能。

使用 Element 組件時(shí)，組件庫(kù)中的含有輸出類型的自定義組件，都會(huì)使用v-model指令，該指令綁定的元素就是組件的輸出結(jié)果。比如 select選擇器

平常只使用v-model做表單元素的數(shù)據(jù)綁定，沒(méi)有仔細(xì)研究過(guò)這背后的原理，不是很理解自定義組件是怎么實(shí)現(xiàn)這個(gè)功能的。

查找了一下相關(guān)資料，其實(shí) Vue.js 的官網(wǎng)上有教程有相關(guān)的資料。

使用自定義事件的表單輸入組件

v-model 其實(shí)是一個(gè)語(yǔ)法糖，這背后其實(shí)做了兩個(gè)操作

v-bind 綁定一個(gè) value 屬性

v-on 指令給當(dāng)前元素綁定 input 事件

在原生表單元素中

就相當(dāng)于

當(dāng)input接收到新的輸入，就會(huì)觸發(fā)input事件，將事件目標(biāo)的value 值賦給綁定的元素

在自定義組件中

相當(dāng)于

這時(shí)候，something接受的值就是input是事件的回掉函數(shù)的第一個(gè)參數(shù)
所以在自定義的組件當(dāng)中，要實(shí)現(xiàn)數(shù)據(jù)綁定，還需要使用[$emit]去觸發(fā)input的事件。

this.$emit("input", value)

GPU云服務(wù)器云服務(wù)器在php中使用組件 linux中的使用 ios中sqlite的使用 java中二維數(shù)組的使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88269.html

相關(guān)文章

iView2 來(lái)了，全面支持 Vue.js 2.x

摘要：來(lái)了兩個(gè)星期的緊張開(kāi)發(fā)，終于發(fā)布了支持的版本。整體性能也大幅度提升。報(bào)名費(fèi)用元，報(bào)名地址微信掃描二維碼更新日志目前已發(fā)布至，文檔還需一段時(shí)間，但很快會(huì)發(fā)布新版本的來(lái)支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 來(lái)了兩個(gè)星期的緊張開(kāi)發(fā)，iView 終于發(fā)布了支...

YFan 2019-08-21 11:34 評(píng)論0 收藏0
v-model

摘要：用法中比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件實(shí)例代碼這里是監(jiān)聽(tīng)了輸入框的事件，并將其賦值給。找到的父組件就是組件，里面沒(méi)有注冊(cè)任何方法只是了屬性。因?yàn)樵谝彩抢昧说恼Z(yǔ)法糖。 Vue v-model 用法 vue 中v-model 比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽(tīng) 用戶的輸入事件實(shí)例代碼 ...

RiverLi 2019-08-21 11:53 評(píng)論0 收藏0
vue.js學(xué)習(xí)筆記

摘要：指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于。對(duì)象形式佐客湯姆咪口修飾符修飾符是以半角句號(hào)指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。指令指令(Directives)是帶有v-前綴的特殊屬性。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。 v-if條件判斷 T...

levy9527 2019-08-22 16:24 評(píng)論0 收藏0
Vue.js Guide Essentials-說(shuō)人話-速記版

摘要：以下內(nèi)容根據(jù)部分速記。同時(shí)，需要在父組件標(biāo)簽中添加這個(gè)屬性，該屬性才能傳遞到子組件內(nèi)。把父組件傳遞的數(shù)據(jù)當(dāng)做子組件的初始值。以下內(nèi)容根據(jù)Vue.js Guide Essentials部分速記。不含動(dòng)畫(huà)/mixin/SSR/路由/狀態(tài)管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開(kāi)始聲明式...

Sanchi 2019-08-21 18:38 評(píng)論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。學(xué)習(xí)筆記：組件詳解組件詳解組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

jeffrey_up 2019-08-23 16:02 評(píng)論0 收藏0