vue修饰符v-model及.sync原理及区别详解

    <!--v-model写法-->
    <my-component type="text" v-model="num">
    <!--展开语法糖后的写法-->
    <my-component type="text"
      :value="num"
      @input="(value) => num = value"
    >

// 在子组件中
<template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('input',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

// 在父组件中
    <my-component :value.sync="num" />

// 子组件中
    <template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('update:value',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

// 子组件可以用自定义事件，来替换v-model默认对应的原生input事件，只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},