官方解释:

v-model指令其实是下面的语法糖包装而成:

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

因此,对于一个带有 v-model 的组件,它应该如下:

  • 接收一个 value prop
  • 触发 input 事件,并传入新值

利用 $emit 触发 input 事件:

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

实例:

// 组件定义
Vue.component("my-counter", {
  template: `<div>
               <h1>{{value}}</h1>
               <button @click="plus">+</button>
               <button @click="minu">-</button>
             </div>`,
  props: {
    value: Number //接收一个 value 类型是Number
  }
  methods: {
    plus() {
      let val = this.value
      val++
      this.$emit('input', val) //触发 input 事件,并传入新值
    },
    minu() {
      let val = this.value
      if(val>0){
        val--
        this.$emit('input', val) //触发 input 事件,并传入新值
      }
    }
  }
});


// 组件使用
<my-counter v-model="value"></my-counter>

实例2:

<template>
  <div>
    <input type="text" :value="value" @input="inputHandle">
  </div>
</template>

<script>

export default {
  props: ['value'],
  methods: {
    inputHandle(e) {
      this.$emit('input', e.target.value)
    }
  }
}

</script>

// 组件使用
<i-Input v-model="value"></i-Input>

根据官方解释,你可以在定义组件的时候,改写 传入的prop属性 和 $emit 事件


...
model: {
  prop: 'checked',
  event: 'change'
},
...

 

Logo

前往低代码交流专区

更多推荐