vue自定义组件使用v-model

<input v-model="something">

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

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

在一个组件上使用 v-model 时,会简化为:

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

因此,对于一个带有 v-model 的组件,它应该如下:
接收一个 value prop
触发 input 事件,并传入新值
利用 emitinputthis.emit 触发 input 事件: this.emit(‘input’, value)

下面是两个实例

Vue.component('my-component', {
  template: `<div>
  <p></p>
  <input type="text" :value="currentValue" @input="handleInput"/>
  </div>`,
  computed:{
    currentValue:function () {
      return this.value
    }
  },
  props: ['value'], //接收一个 value prop
  methods: {
    handleInput(event) {
      var value = event.target.value;
      this.$emit('input', value); //触发 input 事件,并传入新值
    }
  }
});
<my-component v-model="componentValue"></my-component>
Vue.component("my-counter", {
  template: `<div>
  <h1></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 += 1
      this.$emit('input', this.val) //触发 input 事件,并传入新值
    },
    minu() {
      if(this.val>0){
        this.val -= 1
        this.$emit('input', this.val) //触发 input 事件,并传入新值
      }
    }
  }
});
 <my-counter v-model="componentValue"></my-counter>

文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 上一篇
css知识漏洞 css知识漏洞
线性渐变 linear-gradient background: linear-gradient(direction, color-stop1, color-stop2, ...); to left: 设置渐变为从右到左<=&g
2018年10月10日
下一篇 
常用的css动画库 常用的css动画库
1. animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。使用直接引入官方的css再配合class类名即可。 2. magic.css Magic
2018年10月08日
  目录