Vue中props一定就是只读吗

如下所示，有这样一个props，当它不为空时，尝试将其改为空数组

<script>
	props: {
		selectedTags: {
	      type: Array,
	      default: () => {
	        return []
	      }
	    },
	},
	created() {
		this.onChange();
	},
	methods: {
		onChange() {
			this.selectedTags = [];
		}
	}
</script>

结果报如下错误

打印一下selectedTags的内容

selectedTags: [
	{color:"2", id:"5f351fa5da01ee000170987c", name:"京东白条32223"},
	{color:"1", id:"5f351faada01ee000170987d", name:"京东物流2332"},
	{color:"1", id:"5f351fc0da01ee000170987e", name:"京东金融234232"}
]

那么只修改数组中元素的属性值，也会报错吗？在data里面定义obj，属性设置如下

<script>
	props: {
		selectedTags: {
	      type: Array,
	      default: () => {
	        return []
	      }
	    },
	},
	data() {
		return {
			obj: {
				color: "4",
				id: "5f351fa5da01ee000170987c",
				name: "拼多多"
			}
		}
	}
	created() {
		this.onChange();
	},
	methods: {
		onChange() {
			this.selectedTags.forEach((item) => {
				if(item.id == this.obj.id) {
					item.name = this.obj.name;
					item.color = this.obj.color;
				}
			})
		}
	}
</script>

运行没有报错，再次打印selectedTags，可以看到内容已被修改，说明props为引用类型的话，属性值是可以修改的

selectedTags: [
	{color:"4", id:"5f351fa5da01ee000170987c", name:"拼多多"},
	{color:"1", id:"5f351faada01ee000170987d", name:"京东物流2332"},
	{color:"1", id:"5f351fc0da01ee000170987e", name:"京东金融234232"}
]

项目中遇到很多父子组件嵌套的场景，比如父组件中有一些概览信息，子组件中是详情数据，例如表格。数据由父组件通过xhr请求获取，然后传参给子组件，在子组件中通过props接收，然后通过监听props的变化，将该值传给data。在很多业务场景中，子组件的详情数据都需要支持编辑操作，编辑操作通常是做两件事，一个是通过接口向后端发送更新的数据，二是更新组件的data，以更新视图。但是如果只更新子组件自己的data，那就无法与父组件保持同步，概览信息无法更新。为使父子组件之间能够同步数据，通常的做法包括：子组件向父组件传递更新的数据、让父组件从接口拉一下数据、强制刷新父组件。这样的做法很容易产生冗余数据，同样的数据在父组件和子组件都做了拷贝，没有必要，而且代码耦合度增加，导致组件复用困难。

本人在实践中发现，子组件的props传值给data其实没有必要。为什么要传值给data，因为一般认为，props的值是只读的，只有data才可以修改，所以要将props传给data。但是本人发现，props实际上和es6里的const很像，并非不能修改。当props的值为引用类型（这里有待确认），例如对象，它的属性值是可以通过v-model修改的，因此展示和修改数据都可以用props。而且在子组件中修改props还会直接同步到父组件的data，两端数据会始终保持同步，不需要再进行额外的传参。