v-mdoel 在组件上的运用

v-mdoel 在组件上的运用

const component = {
  props: ['value'],
  template: `
    <div>
      <input :value="value" @input="handleInput">
    </div>
  `,
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}

new Vue({
  el: '#root',
  data () {
    return {
      value: '123'
    }
  },
  template: `
    <div>
      <span>{{value}}</span>
      <comp :value="value" @input="value=arguments[0]"></comp>
    </div>
  `,
  components: {Comp: component}
})

arguments[0] 为子组件handleInput方法的传递的值
<comp :value="value" @input="value=arguments[0]"></comp> 可以写成<comp v-model="value"></comp>

value是作为v-mdoel的默认属性，input作为组件绑定事件的事件名，在复杂的场景中使用，需要用到value与input。那么，可以使用model选项的方式来定制 prop/event
* prop props的别称
* event $emit的别称

const component = {
  model: {
    prop: 'value1',
    event: 'change'
  },
  props: ['value1'],
  methods: {
    handleInput (e) {
      this.$emit('change', e.target.value)
    }
  },
  template: `
    <div>
      <span>{{value}}</span>
      <input :value="value1" @input="handleInput">
    </div>
  `
}