vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼

更新時(shí)間：2018年06月21日 10:25:58 作者：xyfun

這篇文章主要介紹了vue自定義一個(gè)v-model的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

目標(biāo)

<template>
  <my-form v-model="form">
  </my-form>
</template>
<script>
  export default {
    data() {
      return {
        form: ''
      }
    }
  }
<script>

實(shí)現(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自定義一個(gè)v-model的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))，文中通過(guò)圖文表格介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
vuecli4配置sass與less詳解
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
ElementPlus表格中的背景透明解決方案
最近寫大屏,用到elementplus中的el-table,為了讓顯示效果好看一點(diǎn),需要把表格的白色背景調(diào)整為透明,與整個(gè)背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧
2023-10-10
vue實(shí)現(xiàn)組件之間傳值功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見(jiàn)操作技巧,需要的朋友可以參考下
2018-07-07
Vue生命周期中的組件化你知道嗎
這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
Vue中引入svg圖標(biāo)的兩種方式
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
從vue源碼看props的用法
平時(shí)寫vue的時(shí)候知道 props 有很多種用法，今天我們來(lái)看看vue內(nèi)部是怎么處理 props 中那么多的用法的。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2019-01-01
vue項(xiàng)目中如何配置eslint和prettier
這篇文章主要介紹了vue項(xiàng)目中如何配置eslint和prettier問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Element使用el-table組件二次封裝
這篇文章主要為大家介紹了Element使用el-table組件二次封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個(gè)封裝，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04