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

Sat, 01 Aug 2020 03:32:54 +0000

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属性，子组件的值也会改变。从而实现子组件修改父组件的属性值。

组件 on 月盾的博客

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