vue中在自组件中修改父组件通过**props**传入的值

2019-09-25 156 阅读1分钟

需求如下：父组件给自组件传入一些值

<father>
	<son :value='value'></son>
</father>

<son>
props:['value']//从这里获取父组件传入的值
</son>

但是在子组件直接修改props的值就会报数据不同步的警告

解决方案: 使用 .sync 修饰符来使父子组件中的props值进行双向同步

<father>
	<son :value.sync='value'></son>
</father>

<son>
  props:['value']
  monted(){
  	  this.$emit('update:value', t.filter(ele => ele.uid != file.uid));  
  }
</son>

.sync 修饰符会在父组件中监听 update 事件，所以子组件只要将值修改，再通过this.$emit()将修改后的值传入就行了。

.sync 修饰符编译后的结果

<father>
	<son :value='value' @update='(val)=>{value=val}'</son>></son>
</father>