vue中子组件修改父组件数据报错

A！Miss Liu

于 2021-06-11 15:15:46 发布

阅读量817

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/liuj_j/article/details/117816107

本文探讨了在Vue2.0+中，由于数据流的单向性，子组件修改父组件数据会报错的问题。文章介绍了两种解决方案：1) 使用事件$emit通知父组件进行数据修改；2) 在父组件中通过.sync修饰符实现双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中子组件修改父组件数据报错

vue中父子组件数据传递

解决在子组件中修改父组件传来的数据，报错如下：
在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。

[Vue warn]: 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: "你修改的属性名"

由于在vue中数据流是单向的。

方法1 通过事件$emit父组件修改

**父组件中**
<template>
	<div>
		<el-button type="text" @click="dialogVisible = true">点击打开Dialog</el-button>
		<child @closeDialog="getCloseDialog" :visiable="dialogVisible"></child>	
	</div>
</template>	
<script>
//引入子组件
export default {
     
     
	data() {
     
     
		return {
     
     
			dialogVisible: false,
		}
	},
	methods:{
     
     
		getCloseDialog(value){
     
     
			this.dialogVisible=value
		}
	}
}
</script>
**子组件中**