Vue学习笔记四:.sync修饰符

在说明.sync修饰符作用之前,我们需要先弄清楚尤雨溪制定的Vue的三条规则:

  • 组件不能修改props外部数据
  • 在组件内this.$emit可以触发事件并传参
  • $event可以接收this.$emit传递的参数

那么当我们想要在组件内修改外部数据时,我们可以利用以上三条规则:

组件内部触发事件update:title并传递参数newTitle$event

    this.$emit('update:title', newTitle)

组件外部响应事件update:title并接收参数$event

    

这样写是否太麻烦了呢?尤雨溪也是这样觉得,于是他创造了一个语法糖.sync,以上写法可以等价于:

    

总结.sync修饰符可以便捷的实现——父组件监听子组件变更props数据的事件(update:myPropName)并根据需要更新一个本地的数据 property

你可能感兴趣的:(Vue学习笔记四:.sync修饰符)