vue自定义一个v-model的实现代码

 更新时间:2018年06月21日 10:25:58   作者:xyfun  
这篇文章主要介绍了vue自定义一个v-model的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

目标

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

实现

// 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>

总结

以上所述是小编给大家介绍的vue自定义一个v-model的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    VSCode Vue开发推荐插件和VSCode快捷键(小结)

    这篇文章主要介绍了VSCode Vue开发推荐插件和VSCode快捷键(小结),文中通过图文表格介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • vuecli4配置sass与less详解

    vuecli4配置sass与less详解

    这篇文章主要为大家介绍了vuecli4配置sass与less详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • ElementPlus表格中的背景透明解决方案

    ElementPlus表格中的背景透明解决方案

    最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体,本文给大家介绍ElementPlus表格中的背景透明解决方案,感兴趣的朋友一起看看吧
    2023-10-10
  • vue实现组件之间传值功能示例

    vue实现组件之间传值功能示例

    这篇文章主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
    2018-07-07
  • Vue生命周期中的组件化你知道吗

    Vue生命周期中的组件化你知道吗

    这篇文章主要为大家详细介绍了Vue生命周期中的组件化,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 从vue源码看props的用法

    从vue源码看props的用法

    平时写vue的时候知道 props 有很多种用法,今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • vue项目中如何配置eslint和prettier

    vue项目中如何配置eslint和prettier

    这篇文章主要介绍了vue项目中如何配置eslint和prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Element使用el-table组件二次封装

    Element使用el-table组件二次封装

    这篇文章主要为大家介绍了Element使用el-table组件二次封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 详解给Vue2路由导航钩子和axios拦截器做个封装

    详解给Vue2路由导航钩子和axios拦截器做个封装

    本篇文章主要介绍了详解给Vue2路由导航钩子和axios拦截器做个封装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论