Vue数据双向绑定.sync 和v-model

<comp :foo.sync="bar" ></comp>
// 等价于, 组件属性名称一致,默认事件update
<comp :foo="bar" @update:foo="val => bar = val"></comp>

<input :value="foo" @change="$emit("update:foo", $event.target.value)">

<input v-model="something" />
// 等价于, 默认prop是value, 默认行为是input
<input v-bind:value="something" v-on:input="something = arguments[0]"/>

<input :value="value" @input="$emit('input', $event.target.value)">

model: {
    prop: 'checked',
    event: 'change'
}

<template>
    <div>
        <p>父组件：{{value}}</p>
        <child v-model="value"/>
        <!-- 两者等效value, input -->
        <child v-bind:value="value" v-on:input="value = arguments[0]" />
    </div>
</template>
<script>
import child from './Child.vue';
export default {
    components:{
        child
    },
    data(){
        return {
            value: ""
        }
    }
}
</script>

<template>
  <div>
      子组件：
    <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>
<script>
export default {
  props: ["value"]
};
</script>

<template>
  <div>
      子组件：
    <input type="text" :value="foo" @input="$emit('change', $event.target.value)" />
  </div>
</template>
<script>
export default {
  props: ["foo"],
  model:{
      props: "foo",
      event: "change"
  }
};
</script>

<!-- v-model写法不用变 -->
<child v-model="value"/>
<!-- 两者等效，需要修改下面的代码 -->
<child v-bind:foo="value" v-on:change="value = arguments[0]" />

<template>
    <div>
        <p>父组件：{{value}}</p>
        <child :foo.sync="value"/>
        <!-- 两者等效 -->
        <child v-bind:foo="value" v-on:update:foo="val => foo = value" />
    </div>
</template>
<script>
import child from './Child.vue';
export default {
    components:{
        child
    },
    data(){
        return {
            value: ""
        }
    }
}
</script>

<template>
  <div>
      子组件：
    <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
  </div>
</template>
<script>
export default {
  props: ["foo"]
};
</script>