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

calx 發布于2019-08-21 15:49 / 371人閱讀

摘要：在中，經常會使用實現表單的雙向數據綁定功能。使用組件時，組件庫中的含有輸出類型的自定義組件，都會使用指令，該指令綁定的元素就是組件的輸出結果。

在 Vue.js 中，經常會使用 v-model 實現表單的雙向數據綁定功能。

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

平常只使用v-model做表單元素的數據綁定，沒有仔細研究過這背后的原理，不是很理解自定義組件是怎么實現這個功能的。

查找了一下相關資料，其實 Vue.js 的官網上有教程有相關的資料。

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

v-model 其實是一個語法糖，這背后其實做了兩個操作

v-bind 綁定一個 value 屬性

v-on 指令給當前元素綁定 input 事件

在原生表單元素中

就相當于

當input接收到新的輸入，就會觸發input事件，將事件目標的value 值賦給綁定的元素

在自定義組件中

相當于

這時候，something接受的值就是input是事件的回掉函數的第一個參數
所以在自定義的組件當中，要實現數據綁定，還需要使用[$emit]去觸發input的事件。

this.$emit("input", value)

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88269.html

iView2 來了，全面支持 Vue.js 2.x

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

YFan 2019-08-21 11:34 評論0 收藏0
v-model

摘要：用法中比較基礎的用法是在表單控件中，創建雙向數據綁定，能夠更新數據并負責監聽用戶的輸入事件實例代碼這里是監聽了輸入框的事件，并將其賦值給。找到的父組件就是組件，里面沒有注冊任何方法只是了屬性。因為在也是利用了的語法糖。 Vue v-model 用法 vue 中v-model 比較基礎的用法是在表單控件中，創建雙向數據綁定，能夠更新數據并負責監聽用戶的輸入事件實例代碼 ...

RiverLi 2019-08-21 11:53 評論0 收藏0
vue.js學習筆記

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

levy9527 2019-08-22 16:24 評論0 收藏0
Vue.js Guide Essentials-說人話-速記版

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

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

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0