vue中.sync修饰符的用法总结

vue中.sync修饰符的用法总结

需求描述:

• 最近项目中需要在父子组件中实现数据双向传递的功能。

解决方案:

• 在vue中我们知道props传递的属性只能实现数据的单向流动，如果我们要实现逆向传递的功能一般通过this.$emit()来触发方法来实现，使用.sync修饰符只需要通过this.$emit()来触发属性就能实现。

• // 父组件使用 .sync 传递
  :page.sync="searchForm.page"
  
  // 子组件使用 'update:' 触发
  this.$emit('update:page', data)
  

• 注意：在uniapp项目中的某些情况下不能正常使用。