问题描述

最近在学习Vue，在学习自定义事件的.sync修饰符实现改变数值时发现一个问题如下
由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果，具体如下
使用.sync修饰符,即

    // this.$emit('update:father-num',100);  //无效
    this.$emit('update:fatherNum',100); //有效
    //......
    <father v-bind:father-num.sync="test"></father>

与
不使用.sync，即

      this.$emit('update:father-num',100);  //有效
      //this.$emit('update:fatherNum',100); // 无效
      
      //......
    <father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>

我贴下具体代码吧，有点难说清楚，问题出现在$emit('update:xxx')中xxx写法问题

相关代码

    Vue.component('father',{
        props:{
            'fatherNum':Number
        },
        template:`
        <div >
            <h1>fatherNum:{{fatherNum}}</h1>
            <button v-on:click="testFunction">father</button>
        </div>`,
        methods:{
            testFunction:function () {
                // this.$emit('update:father-num',100);  //.sync写法无效,无sync写法有效
                this.$emit('update:fatherNum',100); //.sync写法有效,无sync写法无效
        }
    }});
</script>
<div id="container">
    <p>.sync写法</p>
    <father v-bind:father-num.sync="test"></father>
    <p>无sync写法</p>
    <father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>
</div>
<script>
    var container = new Vue({
        el:"#container",
        data:{
            test:1
        }
    })
</script>

请大佬赐教