vue-自定义组件使用v-model

最新推荐文章于 2025-05-16 16:47:55 发布

原创最新推荐文章于 2025-05-16 16:47:55 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文深入解析了Vue中v-model的双向绑定原理，展示了如何在自定义组件中使用v-model，包括输入框和计数器组件的具体实现。

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

是我们常用的双向绑定方法，如果在自定义组件中如何使用v-model进行双向绑定呢？

首先我们必须要清除v-model绑定的原理如下：
其实v-model的语法糖是这样包装而成的：

<input  :value="something"  @:input="something = $event.target.value">

而一个组件上使用时则会简化成这样子：

<custom-input  :value="something"   @input="value => { something = value }"></custom-input>

因此，对于一个带有 v-model 的组件（核心用法），它应该如下：
1、带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件，子组件通过 prop接收一个 value;
2、子组件利用 $emit 触发 input 事件，并传入新值value给父组件；

this.$emit('input', value);

简单代码示例：

<div id="app">
  <my-component v-model="msg"></my-component>
  msg: {{msg}}
  <my-counter v-model="num"></my-counter>
  num: {{num}}
</div>

Vue.component('my-component', {
  template: `<div>
  <input type="text" :value="currentValue" @input="handleInput"/>
  </div>`,
  data: function () {
    return {
      currentValue: this.value //将prop属性绑定到data属性上，以便修改prop属性（Vue不允许直接修改prop属性的值）
    }
  },
  props: ['value'], //接收一个 value prop
  methods: {
    handleInput(event) {
      var value = event.target.value;
      this.$emit('input', value); //触发 input 事件，并传入新值
    }
  }
});
Vue.component("my-counter", {
  template: `<div>
  <h1>{{value}}</h1>
  <button @click="plus">+</button>
  <button @click="minu">-</button>
  </div>`,
  props: {
    value: Number //接收一个 value prop
  },
  data: function() {
    return {
      val: this.value
    }
  },
  methods: {
    plus() {
      this.val = this.val + 1
      this.$emit('input', this.val) //触发 input 事件，并传入新值
    },
    minu() {
      if(this.val>0){
        this.val = this.val-1
        this.$emit('input', this.val) //触发 input 事件，并传入新值
      }
    }
  }
});
new Vue({
    el: '#app',
  data: {
    msg: 'hello world',
    num: 0
  }
})

这样在组件上就能够实现，v-model的双向数据绑定。
技术提供：昆明猫咪科技