Vue v-model语法糖

v-model语法糖

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

 <input v-model="message"></input>

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

<input :value="message" @input="onInput"></input>

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

<div id="app">
  {
  {message}}
  <field :value="message" @input="onInput"></field>
  <field v-model="message"></field>
</div>

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

field子组件：

 Vue.component('field', {
    props: {
      value: {
        type: String
      }
    },
    template: `
      <input :value="value" &#