如何在vue中自定义v-model-创新互联

如何在vue中自定义v-model？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联专业为企业提供灵璧网站建设、灵璧做网站、灵璧网站设计、灵璧网站制作等企业网站建设、网页设计与制作、灵璧企业网站模板建站服务，10余年灵璧做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

目标

<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问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。