vue自定义v-model

最新推荐文章于 2025-05-15 10:41:07 发布

Heartbroken_man

最新推荐文章于 2025-05-15 10:41:07 发布

阅读量346

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Heartbroken_man/article/details/120284750

vue 专栏收录该内容

2 篇文章

订阅专栏

本文探讨Vue自定义v-model的原理，指出v-model是input的v-bind:value和v-on:input的语法糖。通过在子组件内部定义model和props来创建自定义组件，例如输入框和复选框，并说明了v-model在2.2.0到3.0版本间的使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于本质上v-model只是input的v-bind:value和v-on:input的语法糖

官方的案例和解释是这样的

也就是说我们需要在子组件内部定义model和props

model里面的event值子组件的事件，prop值修改的值

比如说定义一个输入框组件

<template>
  <div class="em-input">
    <input type="text" @input="$emit('input',$event.target.value)" :value="value" />
  </div>
</template>
<script>
export default {
  name: "em-input",
  model:{
      event:'input',
      prop:'value'
  },
  props: {
    value:{
      type:String,
      default:''
    }
  }
};
</script>

我们在父组件引入之间使用v-model就可以了

<template>
  <div class="home">
      <em-input v-model="vmodel"/>
  </div>
</template>
<script>
import EmInput from '../components/em-input.vue';
export default {
  name: 'Home',
  components: {
    EmInput
  },
  data() {
    return {
      vmodel:'1234'
    }
  }
</script>

或者定义一个复选框组件也一样

<template>
    <div>
        <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
    </div>
</template>
<script>
export default {
    name:'base-check',
    model:{
        prop: 'checked',
        event: 'change'
    },
    props: {
        checked: Boolean
    }
}
</script>