快捷導航

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

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

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

目標

<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)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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