Vue .sync修饰符与$emit(update:xxx)写法问题

最新推荐文章于 2025-03-03 17:37:28 发布

weixin_33901641

最新推荐文章于 2025-03-03 17:37:28 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/catherLee/p/10383900.html

本文探讨了在Vue框架中使用自定义事件的.sync修饰符时遇到的问题，特别是关于父组件传递给子组件的数值属性在大小写命名上的敏感性。通过对比两种不同情况下的$emit调用效果，揭示了(sync修饰符在处理更新数值时的内部机制。

在学习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>

转载于:https://www.cnblogs.com/catherLee/p/10383900.html