vue自定義一個v-model的實現(xiàn)代碼
更新時間:2018年06月21日 10:25:58 作者:xyfun
這篇文章主要介紹了vue自定義一個v-model的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
目標(biāo)
<template>
<my-form v-model="form">
</my-form>
</template>
<script>
export default {
data() {
return {
form: ''
}
}
}
<script>
實現(xiàn)
// my-form組件
<template>
<form>
<input v-model="model.val1" />
<textarea v-model="model.val2"></textarea>
<form>
</template>
<script>
export default {
model: {
prop: 'model',
event: 'change'
},
props: {
model: Object
}
watch: {
model(val){
this.$emit('change', val)
}
}
}
<script>
總結(jié)
以上所述是小編給大家介紹的vue自定義一個v-model的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- Vue表單demo v-model雙向綁定問題
- vue中v-model的應(yīng)用及使用詳解
- 詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
- vue.js使用v-model指令實現(xiàn)的數(shù)據(jù)雙向綁定功能示例
- 以v-model與promise兩種方式實現(xiàn)vue彈窗組件
- vue如何在自定義組件中使用v-model
- vue項目中v-model父子組件通信的實現(xiàn)詳解
- 利用vue組件自定義v-model實現(xiàn)一個Tab組件方法示例
- vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法
- 淺析Vue自定義組件的v-model
- vue v-model動態(tài)生成詳解
相關(guān)文章
VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié)),文中通過圖文表格介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個封裝,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04

