子组件不能直接修改props传递进来的数据

不能直接修改props接收的数据

在vue项目中常用props和$emit实现父子组件之间的数据传递

用法：（这里以vue2为例）

父组件

子组件

如果在子组件的方法中直接对props接收的数据进行修改

updateCount(){ this.count++ }
则会直接报错提示你不能对props中的数据进行直接操作

想要对props接收到的数据进行修改，可以通过触发父组件在子组件上绑定的自定义是事件，在子组件中通过触发该自定义事件将修改数据传递出去，在父组件中进行修改
例如：


或者通过computed计算属性拿到一个依赖props中的数据的新数据，当该数据变化时，利用computed中的set,将新的值传递给父组件并修改

在vue3中也可使用props和emit实现父子通信
例如：接收props参数

//父组件中
//<Child :count='count' @updateCount='updateCount' />
import { defineProps, computed, defineEmits} from 'vue'
const props=defineProps(['count'])
const emits=defineEmits(['updateCount'])
const editCount=computed({
	get(){
		return props.count
	},
	set(val){
		emits('updateCount',val)
	}
})