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>
  `
}