Vue v-model语法糖

v-model语法糖

我们可以使用v-model对input进行双向绑定

v-model 语法糖本质是 :value="message" @input="onInput"

如果使子组件接收 props: value 并且 $emit('input', value) 事件，那么就直接使用v-modle语法糖

  {{message}}
  
  

:value="message" @input="onInput" 与 v-model="message" 效果相同

field子组件：

 Vue.component('field', {
    props: {
      value: {
        type: String
      }
    },
    template: `
      
    `,
    methods: {
      onInput (e) {
        var value = e.target.value
        this.$emit('input', value)
      }
    }
  })

vue实例：

var app = new Vue({
    el: '#app',
    data: {
      message: 'hello vue !'
    },
    methods: {
      onInput (val) {
        this.message = val
      }
    }
  })

model

如果使用v-model想要监听checkbox的onchange事件，则需要model来自定义v-model语法糖

Vue.component('checkbox', {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      checked: {
        type: Boolean,
        default: false
      }
    },
    template:
          `
      
    `,
    methods: {
      onInput (e) {
        console.log('onInput', e)
      },
      onChange (e) {
        console.log('onChange', e)
        this.$emit('change', e.target.checked)
      }
    }
  })

由于v-model需要在props里面定义value来接受值，emit input来更新值，所以需要model来重新自定义prop和event

使用checkbox组件

 
  
hello

vue实例：

  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello vue !',
      toggle: false
    },
    methods: {
      onInput (val) {
        this.message = val
      }
    }
  })

完整代码：

  
  
  



  {{message}}
  
  
  
  
hello