vue子组件修改父组件的数据

  • 分类:【前端
  • 浏览【27】
  • 评论【0】
  • 更新【2020-8-01 11:32:54】

vue在子组件中直接修改父组件传递下来的数据会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "json"

原因是vue子组件不能直接修改父组件的数据,可以使用this.$emit发送通知,让父组件来修改。 示例代码:

子组件:

this.$emit("changeData", "要修改的数据");

父组件:

<mycomponent :json="JsonData" @changeData="changeData"></mycomponent>

data(){
    return {
		JsonData:{}
	}
}
methods:{
    changeData(newData){
	    this.JsonData = newData;
	}
}

子组件发送changeData事件, 父组件绑定changeData事件并接受数据,赋值给父组件的JsonData属性,子组件的值也会改变。从而实现子组件修改父组件的属性值。