Vue .sync 在项目中的应用

官网介绍

传送门

场景介绍

Vue 父子传值是单项数据流，子元素如果直接操作通过Prop 传过来的值会就报错，但是在实际业务中就有这样的需求，所以就有了 sync 修饰符 。

例子

/*
* 父组件
*/

<FilelistUpdate
	ref="filelistUpdate"
	:loading="insuredLoading"
	:FileListdata.sync="FileListdata"
	@save="saveFilelistupdate"
/>

/*
* 子组件
*/
 ... 
  props: {
    FileListdata:{
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
  	uploadBeforeRemove(file, key) {
  	/*
  	* 上传文件的删除方法
  	* 假定我们在这个方法体内我们要修改 Prop 传过来的值，
  	* 那么我们就需要把值传给父元素，实现伪双向数据绑定
  	*/
	... 修改FileListdata
	let FileListdataNew = FileListdata;
	this.$emit("update:FileListdata", FileListdataNew );
  	}
  }
  ...

总结

1，父元素中的 Prop 传值 要使用 sync修饰符
2，this.$emit(“update:FileListdata”, FileListdataNew ); 通知父元素修改数据，子元素数据也发生改变